Hour 6 Introducing Data Binding

대부분의 응용 프로그램은 사용자에게 데이터를 보여주는 것이 주 목적이며, 가끔 사용자들이 데이터를 수정하도록 하기도 한다

Binding Two Controls Together

<StackPanel> <TextBlock Text="This is fun!" FontSize="{Binding ElementName=mySlider, Path=Value}" HorizontalAlignment="Center" /> <Slider x:Name="mySlider" Minimum="8" Maximum="64" /> </StackPanel>

Two-Way Data Binding

<StackPanel> <TextBox Text="{Binding ElementName=mySlider, Path=Value, Mode=TwoWay}" /> <Slider x:Name="mySlider" Minimum="0" Maximum="100" /> </StackPanel>

Binding to the Collection of Fonts

<DockPanel Margin="8"> <Border DockPanel.Dock="Top" CornerRadius="6" BorderThickness="1" BorderBrush="Gray" Background="LightGray" Padding="8" Margin="0 0 0 8"> <TextBlock FontSize="14" TextWrapping="Wrap"> Select a font to view from the list below. You can change the text by typing in the region at the bottom </TextBlock> </Border> <ListBox x:Name="FontList" DataContext="{x:Static Fonts.SystemFontFamilies}" DockPanel.Dock="Left" ItemsSource="{Binding}" ToolTip="{Binding Path=Count}" Width="160" /> <TextBox x:Name="SampleText" DockPanel.Dock="Bottom" MinLines="4" Margin="8 0" TextWrapping="Wrap" ToolTip="Type here to change the preview text"> The quick brown fox jumps over the lazy dog </TextBox> <StackPanel Margin="8 0 8 8"> <TextBlock Text="{Binding Path=Count}" /> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="10" TextWrapping="Wrap" Margin="0 0 0 4" /> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="16" TextWrapping="Wrap" Margin="0 0 0 4" /> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="24" TextWrapping="Wrap" Margin="0 0 0 4" /> <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" FontFamily="{Binding ElementName=FontList, Path=SelectedItem}" FontSize="32" TextWrapping="Wrap" /> </StackPanel>   </DockPanel>

Demonstrating Automatic Change Notification

<Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <TextBox Text="{Binding Path=FirstName, Mode=TwoWay}" Margin="4" /> <Button Grid.Row="1" Height="40" Margin="4" Click="Button_Click" Content="{Binding Path=FirstName, Mode=TwoWay}" />   public MainWindow() { InitializeComponent(); DataContext = new Person(); } private string _firstName; public string FirstName { get { return _firstName; } set { _firstName = value; } }   private void Button_Click(object sender, RoutedEventArgs e) { ((Person)DataContext).FirstName = "My new name"; } public event EventHandler FirstNameChanged; private void OnFirstNameChanged() { if (FirstNameChanged != null) FirstNameChanged(this, EventArgs.Empty); }   class Person { private string _firstName; public string FirstName { get { return _firstName; } set { _firstName = value;   } } }

 

출처: programming WPF 사용자 경험을 바꾸는 기술