# Привязка (Binding). Интерфейс INotifyPropertyChanged. Форматирование значений привязки и конвертеры значений.

## Введение в привязку данных

```
<StackPanel>
    <TextBox 
        x:Name="myTextBox" 
        Height="30" />
    <TextBlock 
        x:Name="myTextBlock" 
        Text="{Binding 
            ElementName=myTextBox,
            Path=Text}"
        Height="30" />
</StackPanel>
```
![](./img/1.png)

### Свойство Source
```
    <Window.Resources>
        <local:Phone 
            x:Key="nexusPhone" 
            Title="Nexus X5" 
            Company="Google" 
            Price="25000" />
    </Window.Resources>
    <Grid Background="DeepSkyBlue">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock 
            Text="Модель:" 
            Foreground="White"/>
        <TextBlock 
            x:Name="titleTextBlock" 
            Text="{Binding 
                Source={StaticResource nexusPhone}, 
                Path=Title}"
            Foreground="White" 
            Grid.Column="1"/>
        <TextBlock 
            Text="Цена:" 
            Foreground="White" 
            Grid.Row="1"/>
        <TextBlock 
            x:Name="priceTextBlock" 
            Text="{Binding 
                Source={StaticResource nexusPhone}, 
                Path=Price}"
            Foreground="White" 
            Grid.Column="1" 
            Grid.Row="1"/>
    </Grid>
</Window>
```
![](./img/2.png)

```
<StackPanel>
    <StackPanel.Resources>
        <sys:String 
            x:Key="ComboBoxTitle">Items:
        </sys:String>
    </StackPanel.Resources>
    <Label 
        Content="{StaticResource ComboBoxTitle}" />
</StackPanel>
```
![](./img/3.png)

### Свойство TargetNullValue


```
<Window.Resources>
    <local:Phone 
        x:Key="nexusPhone" 
        Company="Google" 
        Price="25000" />
</Window.Resources>
<StackPanel>
    <TextBlock 
        x:Name="titleTextBlock"
        Text="{Binding 
            Source={StaticResource nexusPhone}, 
            Path=Title, 
            TargetNullValue=Текст по умолчанию}" />
</StackPanel>
```
![](./img/4.png)

### Свойство RelativeSource

```
<TextBox Text="{Binding 
    RelativeSource={RelativeSource Mode=Self}, 
    Path=Background, 
    Mode=TwoWay, 
    UpdateSourceTrigger=PropertyChanged}" />
```
![](./img/5.png)
#### Привязка к свойствам контейнера:
```
<Grid Background="Black">
    <TextBlock 
        Foreground="White"
        Text="{Binding 
            RelativeSource={RelativeSource 
                Mode=FindAncestor,
                AncestorType={x:Type Grid}}, 
            Path=Background}" />
</Grid>
```
![](./img/6.png)
### Свойство DataContext

```
<Window.Resources>
    <local:Phone 
        x:Key="nexusPhone" 
        Title="Nexus X5" 
        Company="Google" 
        Price="25000" />
</Window.Resources>
<Grid 
    DataContext="{StaticResource nexusPhone}" 
    x:DataType="local:Phone"
>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <TextBlock 
        Text="Модель" />
    <TextBlock 
        Text="{Binding Title}" 
        Grid.Row="1" />
    <TextBlock 
        Text="Производитель" 
        Grid.Column="1"/>
    <TextBlock 
        Text="{Binding Company}" 
        Grid.Column="1" 
        Grid.Row="1" />
    <TextBlock 
        Text="Цена" 
        Grid.Column="2" />
    <TextBlock 
        Text="{Binding Price}" 
        Grid.Column="2" 
        Grid.Row="1" />
</Grid>
```
![](./img/7.png)

### Интерфейс INotifyPropertyChanged.
```
<Window.Resources>
    <local:Phone 
        x:Key="nexusPhone" 
        Title="Nexus X5" 
        Company="Google" 
        Price="25000" />
</Window.Resources>
<Grid 
    DataContext="{StaticResource nexusPhone}" 
    x:DataType="local:Phone"
    >
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <TextBlock 
        Text="Модель" />
    <TextBlock 
        Text="{Binding Title}" 
        Grid.Row="1" />
    <TextBlock 
        Text="Производитель" 
        Grid.Column="1"/>
    <TextBlock 
        Text="{Binding Company}" 
        Grid.Column="1" 
        Grid.Row="1" />
    <TextBlock 
        Text="Цена" 
        Grid.Column="2" />
    <TextBlock 
        Text="{Binding Price}" 
        Grid.Column="2" 
        Grid.Row="1" />

    <Button 
        Content="Изменить" 
        Click="Button_Click" 
        Grid.Column="2" 
        Grid.Row="2" />
</Grid>
```

![](./img/8.png)

### Форматирование значений привязки и конвертеры значений

```
class Phone
<Window.Resources>
    <local:Phone 
        x:Key="nexusPhone" 
        Title="Nexus X5" 
        Company="Google" 
        Price="25000" />
</Window.Resources>
<Grid>
    <TextBlock 
        Text="{Binding 
            StringFormat=Итоговая цена {0} рублей, 
            Source={StaticResource nexusPhone}, 
            Path=Price}" />
</Grid>
```
![](./img/9.png)
![](./img/10.png)
![](./img/11.png)
### Конвертеры значений
```
<Window.Resources>
    <sys:DateTime x:Key="myDate">
        2/12/2016
    </sys:DateTime>
    <local:DateTimeToDateConverter 
        x:Key="myDateConverter" />
</Window.Resources>
<StackPanel>
    <TextBlock 
        Text="{Binding 
            Source={StaticResource myDate},
            Converter={StaticResource myDateConverter}}" />
    <TextBlock 
        Text="{Binding 
            Source={StaticResource myDate}}" />
</StackPanel>
```
![](./img/12.png)
```
<StackPanel>
    <TextBlock 
        Text="{Binding 
            Source={StaticResource myDate},
            Converter={StaticResource myDateConverter}}" />
    <TextBlock 
        Text="{Binding 
            Source={StaticResource myDate}, 
            ConverterParameter=EN, 
            Converter={StaticResource myDateConverter}}" />
    <TextBlock 
        Text="{Binding 
            Source={StaticResource myDate}}" />
</StackPanel>
```
![](./img/13.png)