<UserControl x:Class="C1BindingDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="600" >

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.Resources>
            <Style x:Key="_styTitle" TargetType="TextBlock" >
                <Setter Property="FontWeight" Value="Bold" />
                <Setter Property="FontSize" Value="14" />
                <Setter Property="Margin" Value="0 8 0 0" />
            </Style>
        </Grid.Resources>

        <!-- top panel: title, slider -->
        <StackPanel Orientation="Vertical" Grid.ColumnSpan="2" Margin="8">
            <TextBlock Text="ComponentOne C1Binding Demo" FontWeight="Bold" FontSize="16" />
            <TextBlock Text="Use the slider to change properties of the first item" Style="{StaticResource _styTitle}" />
            <Slider 
                Name="slider1" Height="23" Margin="12 0" VerticalAlignment="Top" 
                Minimum="0" Maximum="100"
                ValueChanged="slider1_ValueChanged" />
        </StackPanel>

        <!-- regular binding -->
        <Border Grid.Row="1" Background="WhiteSmoke" Padding="8" >
            <StackPanel Orientation="Vertical" >
                <TextBlock Text="Regular Binding" Style="{StaticResource _styTitle}" />
                <StackPanel Orientation="Horizontal" Margin="5" >
                    <TextBlock Text="Name" Width="80" />
                    <TextBlock Text="{Binding Name}" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="5" >
                    <TextBlock Text="Amount" Width="80" />
                    <TextBlock Text="{Binding Amount, StringFormat=c}" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="5" >
                    <TextBlock Text="Active" Width="80" />
                    <CheckBox IsChecked="{Binding Active}" />
                </StackPanel>
            </StackPanel>
        </Border>

        <!-- template binding -->
        <Border Grid.Row="1" Grid.Column="1" Background="WhiteSmoke" Padding="8" >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock Text="Template Binding" Style="{StaticResource _styTitle}" />
                <ListBox Grid.Row="1" Name="_listBox" Margin="5 0" >
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" >
                                <TextBlock Text="{Binding Name}" Width="80" />
                                <TextBlock Text="{Binding Amount, StringFormat=c}" Width="80" />
                                <CheckBox IsChecked="{Binding Active}" Width="20" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </Border>

        <!-- C1Binding -->
        <Border Grid.Row="2" Background="Yellow" Padding="8" >
            <StackPanel Orientation="Vertical" >
                <TextBlock Text="C1Binding" Style="{StaticResource _styTitle}" />
                <StackPanel Orientation="Horizontal" Margin="5" >
                    <TextBlock Text="Name" Width="80" />
                    <TextBlock 
                        Text="{c1:C1Binding Expression=Name}" 
                        FontWeight="{c1:C1Binding Expression='if(Active, |Bold|, |Normal|)'}"
                        Foreground="{c1:C1Binding Expression='if(Active, |Blue|, |Red|)'}" 
                        />
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="5" >
                    <TextBlock Text="Amount" Width="80" />
                    <TextBlock 
                        Text="{c1:C1Binding Expression='concatenate(text(Amount, |c|), | (tax: |, text(Amount * 8.5%, |c|), |)|)', StringFormat=c}" 
                        FontWeight="{c1:C1Binding Expression='if(Active, |Bold|, |Normal|)'}"
                        />
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="5" >
                    <TextBlock Text="Active" Width="80" />
                    <CheckBox IsChecked="{c1:C1Binding Expression=Active}" />
                </StackPanel>
            </StackPanel>
        </Border>

        <!-- template C1Binding -->
        <Border Grid.Row="2" Grid.Column="1" Background="Yellow" Padding="8" >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock Text="Template C1Binding" Style="{StaticResource _styTitle}" />
                <ListBox Grid.Row="1" Name="_listBox2" MaxHeight="200" Margin="5 0" >
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" >
                                <TextBlock 
                                    Text="{c1:C1Binding Expression=Name}" 
                                    FontWeight="{c1:C1Binding Expression='if(Active, |Bold|, |Normal|)'}"
                                    Foreground="{c1:C1Binding Expression='if(Active, |Blue|, |Red|)'}" 
                                    Width="80" />
                                <TextBlock 
                                    Text="{c1:C1Binding Expression='concatenate(text(Amount, |c|), | (tax: |, text(Amount * 8.5%, |c|), |)|)', StringFormat=c}" 
                                    FontWeight="{c1:C1Binding Expression='if(Active, |Bold|, |Normal|)'}"
                                    Width="150" />
                                <CheckBox 
                                    IsChecked="{c1:C1Binding Expression=Active}" 
                                    Width="20" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </Border>
    </Grid>
</UserControl>
