<Window x:Class="FlexSheetSample.FormatCellDialog"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:FlexSheetSample"
        Title="FormatCellDialog" Height="455" Width="545" ResizeMode="NoResize">
    <Grid>
        <Grid.Resources>
            <local:ColorToSolidColorBrushConverter x:Key="colorToBrush"></local:ColorToSolidColorBrushConverter>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="60"></RowDefinition>
        </Grid.RowDefinitions>
        <TabControl Grid.Row="0">
            <TabItem Header="Number">
                <Grid x:Name="numberGrid" Margin="10">
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition Height="auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="125"></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0" Grid.Column="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="240"></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0">Category</TextBlock>
                        <ListBox x:Name="formatList" Grid.Row="1" ItemsSource="{Binding NumberFormats}" DisplayMemberPath="Name" 
                                 SelectedItem="{Binding SelectedNumberFormat, Mode=TwoWay}" Height="240"
                                 SelectionChanged="formatList_SelectionChanged"></ListBox>
                    </Grid>
                    <Grid Grid.Row="0" Grid.Column="1">
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0">
                            <Rectangle Width="370" Height="25" Stroke="Gray" StrokeThickness="1"></Rectangle>
                            <TextBlock Background="White" TextWrapping="Wrap"  Width="40" Height="20" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,18,0,0">Sample</TextBlock>
                            <TextBlock Text="{Binding Text}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                        </Grid>
                        <StackPanel x:Name="placesPanel" Grid.Row="1" Orientation="Horizontal" Margin="8,0,0,0">
                            <TextBlock>Decimal Places:</TextBlock>
                            <c1:C1NumericBox x:Name="decimalNumeric" Height="20" VerticalAlignment="Top"
                                             Minimum="0"
                                             Value="{Binding SelectedNumberFormat.DecimalPlaces, Mode=TwoWay}"></c1:C1NumericBox>
                        </StackPanel>
                    </Grid>
                </Grid>
            </TabItem>
            <TabItem Header="Alignment">
                <Grid x:Name="alignmentGrid" Margin="10">
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="380"></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0" Grid.Column="0">
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Line X1="0" X2="280" Stroke="Gray" StrokeThickness="1" Grid.Row="0" Grid.ColumnSpan="2" VerticalAlignment="Top" Margin="80,10,0,0"></Line>
                        <TextBlock Grid.Row="0">Text alignment</TextBlock>
                        <TextBlock Grid.Row="1">Horizontal:</TextBlock>
                        <ComboBox x:Name="horizontalCmb" Grid.Row="2" Grid.Column="0"
                                  Margin="0,0,20,0"
                                  SelectedItem="{Binding SelectedHorAlignment}"
                                  ItemsSource="{Binding Horizontal}" SelectionChanged="horizontalCmb_SelectionChanged"></ComboBox>
                        <TextBlock Grid.Row="2" Grid.Column="1">Indent:</TextBlock>
                        <TextBlock Grid.Row="3" Grid.Column="0">Vertical:</TextBlock>
                        <c1:C1NumericBox x:Name="indentNumeric" Grid.Row="3" Grid.Column="1" 
                                         Margin="0,0,140,0"
                                         Value="{Binding Indent, Mode=TwoWay}"></c1:C1NumericBox>
                        <ComboBox x:Name="verticalCmb" Grid.Row="4" Grid.Column="0"
                                  Margin="0,0,20,0"
                                  SelectedItem="{Binding SelectedVerAlignment}"
                                  ItemsSource="{Binding Vertical}" 
                                  SelectionChanged="verticalCmb_SelectionChanged"></ComboBox>
                    </Grid>
                    <Grid Grid.Row="1" Grid.Column="0" Margin="0,20,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Line X1="0" X2="300" Stroke="Gray" StrokeThickness="1" Grid.Row="0" Grid.ColumnSpan="2" VerticalAlignment="Top" Margin="65,10,0,0"></Line>
                        <TextBlock Grid.Row="0">Text control</TextBlock>
                        <CheckBox Grid.Row="1" IsChecked="{Binding WrapText}" IsThreeState="False">Wrap Text</CheckBox>
                    </Grid>
                    <Grid Grid.Row="0" Grid.Column="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Line X1="0" X2="60" Stroke="Gray" StrokeThickness="1" Grid.Row="0"  VerticalAlignment="Top" Margin="60,10,0,0"></Line>
                        <TextBlock Grid.Row="0">Orientation</TextBlock>
                        <c1:C1NumericBox Grid.Row="1" Height="20" Width="60" HorizontalAlignment="Left" Value="{Binding Degree, Mode=TwoWay}"></c1:C1NumericBox>
                        <TextBlock Grid.Row="1" Margin="65,0,-65,0" >Degrees</TextBlock>
                    </Grid>
                </Grid>
            </TabItem>
            <TabItem Header="Font">
                <Grid x:Name="fontGrid" Margin="10" >
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0" Grid.Column="0" Margin="0,0,10,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0">Font:</TextBlock>
                        <TextBox Grid.Row="1" Text="{Binding ElementName=lstBoxFonts, Path=SelectedValue}"
                                 Height="20"></TextBox>
                        <ListBox x:Name="lstBoxFonts" Grid.Row="2" ItemsSource="{Binding FontsCollection}" ></ListBox>
                    </Grid>
                    <Grid Grid.Row="0" Grid.Column="1" Margin="0,0,10,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0">Font Style:</TextBlock>
                        <TextBox Grid.Row="1" Height="20" Text="{Binding ElementName=lstFontStyle, Path=SelectedValue}"></TextBox>
                        <ListBox x:Name="lstFontStyle" Grid.Row="2" ItemsSource="{Binding FontsStyles}"></ListBox>
                    </Grid>
                    <Grid Grid.Row="0" Grid.Column="2">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0">Size</TextBlock>
                        <TextBox Grid.Row="1" Height="20" Text="{Binding ElementName=lstFontSize, Path=SelectedValue}"></TextBox>
                        <ListBox x:Name="lstFontSize" Grid.Row="2" ItemsSource="{Binding FontSize}"></ListBox>
                    </Grid>
                    <Grid Grid.Row="1" Grid.Column="0" Margin="0,0,10,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0">UnderLine:</TextBlock>
                        <ComboBox x:Name="cmbUnderlines" Grid.Row="1" Height="20" ItemsSource="{Binding Underlines}"></ComboBox>
                    </Grid>
                    <Grid Grid.Row="1" Grid.Column="1" Margin="0,0,10,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0">Color:</TextBlock>
                        <local:ColorPicker x:Name="colorPicker" Grid.Row="1" Height="20"></local:ColorPicker>
                    </Grid>
                    
                    <Grid Grid.Row="2" Grid.ColumnSpan="3" >
                        <TextBlock>
                        This is TrueType font. The same font will be used on both your printer and your screen.
                        </TextBlock>
                    </Grid>
                </Grid>
            </TabItem>
            <TabItem Header="Border">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="3*"></RowDefinition>
                        <RowDefinition Height="1*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0" Grid.Column="0" Margin="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="200"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Rectangle Grid.Row="0" Grid.RowSpan="2"  Stroke="Gray" StrokeThickness="2" SnapsToDevicePixels="True"></Rectangle>
                        <TextBlock Margin="5" Grid.Row="0">Color：</TextBlock>
                        <local:ColorPicker x:Name="borderColorPicker" Grid.Row="1" Height="20" Margin="5,0,5,0" VerticalAlignment="Top"></local:ColorPicker>
                    </Grid>
                    <Grid Grid.Row="0" Grid.Column="1" Margin="5">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0" Margin="0,10,0,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition Height="auto"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Line X1="0" X2="300" Stroke="Gray" StrokeThickness="1" Grid.Row="0" VerticalAlignment="Top" Margin="40,10,0,0"></Line>
                            <TextBlock Grid.Row="0">Presets</TextBlock>
                            <StackPanel Grid.Row="1" Orientation="Horizontal" Button.Click="presets_Click">
                                <Button x:Name="btnNone" Width="40" Height="30" Margin="10">
                                    <Image Source="Resources/None.png" />
                                </Button>
                                <Button x:Name="btnOutline" Width="40" Height="30">
                                    <Image Source="Resources/Outline.png"></Image>
                                </Button>
                            </StackPanel>
                        </Grid>
                        <Grid Grid.Row="1" Button.Click="borderSet_Click">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="40"></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Line X1="0" X2="300" Stroke="Gray" StrokeThickness="1" Grid.Row="0" Grid.ColumnSpan="5" VerticalAlignment="Top" Margin="40,10,0,0"></Line>
                                <TextBlock Grid.Row="0">Border</TextBlock>
                                <Button x:Name="btnBdrTop" Grid.Row="1" Grid.Column="0" Width="20" Height="20">
                                    <Image Source="Resources/Top.png" />
                                </Button>
                                <Button x:Name="btnBdrLeft" Grid.Row="4" Grid.Column="1" Width="20" Height="20">
                                    <Image Source="Resources/Left.png" />
                                </Button>
                                <Button x:Name="btnBdrBottom" Grid.Row="3" Grid.Column="0" Width="20" Height="20">
                                    <Image Source="Resources/Bottom.png" />
                                </Button>
                                <Button x:Name="btnBdrRight" Grid.Row="4" Grid.Column="3" Width="20" Height="20">
                                    <Image Source="Resources/Right.png" />
                                </Button>
                                <Grid x:Name="previewContainer" Grid.Row="1" Grid.RowSpan="3" Grid.Column="1" Grid.ColumnSpan="3" Margin="5">
                                    <Line HorizontalAlignment="Center" VerticalAlignment="Top"
                                          X1="0"  Stroke="Gray" StrokeThickness="1"
                                          X2="{Binding ElementName=previewContainer, Path=ActualWidth}">
                                    </Line>
                                    <Line HorizontalAlignment="Left" VerticalAlignment="Top"
                                          Y1="0"  Stroke="Gray" StrokeThickness="1"
                                          Y2="{Binding ElementName=previewContainer,Path=ActualHeight}">
                                    </Line>
                                    <Line HorizontalAlignment="Center" VerticalAlignment="Bottom"
                                          X1="0"  Stroke="Gray" StrokeThickness="1"
                                          X2="{Binding ElementName=previewContainer, Path=ActualWidth}">
                                    </Line>
                                    <Line HorizontalAlignment="Right" VerticalAlignment="Top"
                                          Y1="0" Stroke="Gray" StrokeThickness="1"
                                          Y2="{Binding ElementName=previewContainer,Path=ActualHeight}">
                                    </Line>
                                    <Grid x:Name="previewPanel" Margin="15">
                                        <Grid.Resources>
                                            <BooleanToVisibilityConverter x:Key="BoolToVis"/>
                                        </Grid.Resources>
                                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Text</TextBlock>
                                        <Line HorizontalAlignment="Center" VerticalAlignment="Top"
                                          Visibility="{Binding ShowBorderTop, Converter={StaticResource BoolToVis}}"
                                          X1="0"  Stroke="Black" StrokeThickness="1"
                                          X2="{Binding ElementName=previewPanel, Path=ActualWidth}">
                                        </Line>
                                        <Line HorizontalAlignment="Left" VerticalAlignment="Top"
                                          Visibility="{Binding ShowBorderLeft, Converter={StaticResource BoolToVis}}"
                                          Y1="0"  Stroke="Black" StrokeThickness="1"
                                          Y2="{Binding ElementName=previewPanel,Path=ActualHeight}">
                                        </Line>
                                        <Line HorizontalAlignment="Center" VerticalAlignment="Bottom"
                                          Visibility="{Binding ShowBorderBottom, Converter={StaticResource BoolToVis}}"
                                          X1="0"  Stroke="Black" StrokeThickness="1"
                                          X2="{Binding ElementName=previewPanel, Path=ActualWidth}">
                                        </Line>
                                        <Line HorizontalAlignment="Right" VerticalAlignment="Top"
                                          Visibility="{Binding ShowBorderRight,Converter={StaticResource BoolToVis}}"
                                          Y1="0" Stroke="Black" StrokeThickness="1"
                                          Y2="{Binding ElementName=previewPanel,Path=ActualHeight}">
                                        </Line>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid Grid.Row="1" Grid.ColumnSpan="2" Margin="10">
                        <TextBlock TextWrapping="Wrap">
                            The selected border style can be applied by clicking the presets, preview diagram or the buttons above.
                        </TextBlock>
                    </Grid>
                </Grid>
            </TabItem>
            <TabItem Header="Fill">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition Height="auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0" Grid.Column="0" Margin="10,10,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Margin="0,5">BackGround Color:</TextBlock>
                        <ToggleButton x:Name="btnTransparent" Grid.Row="1" Height="25" IsThreeState="False" Margin="0,5">No Color</ToggleButton>
                        <local:ColorSelector x:Name="colorSelector" Grid.Row="2"  Width="260"></local:ColorSelector>
                    </Grid>
                    <Grid Grid.Row="1" Grid.ColumnSpan="2">
                        <Rectangle Width="500" Height="50" Margin="10" Stroke="Gray"></Rectangle>
                        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,0,0,0" Background="White">Sample</TextBlock>
                        <Rectangle Width="480" Height="25" Fill="{Binding ElementName=colorSelector, Path=CustomColor, Converter={StaticResource colorToBrush}}"></Rectangle>
                    </Grid>
                </Grid>
            </TabItem>
        </TabControl>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button x:Name="btnOK" Grid.Column="0" Width="60" Height="20" 
                    HorizontalAlignment="Right" Margin="0, 0,10, 0" 
                    Click="btnOK_Click">OK</Button>
            <Button x:Name="btnCancel" Grid.Column="1" Width="60" Height="20"
                    Margin="0,0,10,0" Click="BtnCancel_Click">Cancel</Button>
        </Grid>
    </Grid>
</Window>
