<Window x:Class="WpfControlsAndAPIs.MainWindow"
        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:local="clr-namespace:WpfControlsAndAPIs"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="800" Icon="/c5.png">
    <Window.Resources>
        <local:MyDoubleConverter x:Key="DoubleConverter"/>
    </Window.Resources>
    <Grid>
        <TabControl Name="MyTabControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <TabItem Header="Ink API">
                <StackPanel Background="#FFE5E5E5">
                    <ToolBar Name="InkToolBar" Height="60">
                        <Border Margin="0,2,0,2.4" Width="280" VerticalAlignment="Center">
                            <WrapPanel>
                                <RadioButton x:Name="inkRadio" Margin="5,10" Content="Ink Mode!" IsChecked="True" Click="RadioButtonClicked" />
                                <RadioButton x:Name="eraseRadio" Margin="5,10" Content="Erase Mode!" Click="RadioButtonClicked" />
                                <RadioButton x:Name="selectRadio" Margin="5,10" Content="Select Mode!" Click="RadioButtonClicked" />
                            </WrapPanel>
                        </Border>
                        <Separator/>
                        <ComboBox x:Name="comboColors" Width="175" Margin="10,0,0,0" SelectionChanged="ColorChanged">
                            <StackPanel Orientation ="Horizontal" Tag="Red">
                                <Ellipse Fill ="Red" Height ="50" Width ="50"/>
                                <Label FontSize ="20" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Red"/>
                            </StackPanel>
                            <StackPanel Orientation ="Horizontal" Tag="Green">
                                <Ellipse Fill ="Green" Height ="50" Width ="50"/>
                                <Label FontSize ="20" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Green"/>
                            </StackPanel>
                            <StackPanel Orientation ="Horizontal" Tag="Blue">
                                <Ellipse Fill ="Blue" Height ="50" Width ="50"/>
                                <Label FontSize ="20" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Blue"/>
                            </StackPanel>
                        </ComboBox>
                        <Separator/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Button Grid.Column="0" x:Name="btnSave" Margin="10,10" Width="70" Content="Save Data" Click="SaveData"/>
                            <Button Grid.Column="1" x:Name="btnLoad" Margin="10,10" Width="70" Content="Load Data" Click="LoadData"/>
                            <Button Grid.Column="2" x:Name="btnClear" Margin="10,10" Width="70" Content="Clear" Click="Clear"/>
                        </Grid>
                    </ToolBar>
                    <InkCanvas x:Name="MyInkCanvas" Background="#FFB6F4F1" >
                    </InkCanvas>
                </StackPanel>
            </TabItem>
            <TabItem x:Name="tabDataBinding" Header="Data Binding">
                <StackPanel Background="#FFE5E5E5" DataContext = "{Binding ElementName=mySB}">
                    <Label Content="Move the scroll bar to see the current value"/>
                    <!-- The scrollbar's value is the source of this data bind. -->
                    <ScrollBar x:Name="mySB" Orientation="Horizontal" Height="30" Minimum = "1" Maximum = "100" LargeChange="1" SmallChange="1"/>
                    <!-- The label's content will be bound to the scroll bar! -->
                    <!-- Breaking object/value apart via DataContext -->
                    <Label x:Name="labelSBThumb" Height="30" BorderBrush="Blue" BorderThickness="2" />
                    <Button Content="Click" Height="200" FontSize = "{Binding Path=Value}"/>
                </StackPanel>
            </TabItem>
            <TabItem Header="DataGrid">
                <StackPanel>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Button Grid.Column="0" x:Name="bGenerate" Margin="10,10" Width="70" Content="Generate" Click="GenerateDG"/>
                        <Button Grid.Column="1" x:Name="bLoad" Margin="10,10" Width="70" Content="Save Data" Click="SaveDG"/>
                        <Button Grid.Column="2" x:Name="bSave" Margin="10,10" Width="70" Content="Load Data" Click="LoadDG"/>
                    </Grid>
                    <ScrollViewer MaxHeight="250" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
                        <DataGrid Name="myDGV" AutoGeneratingColumn="OnAutoGeneratingColumn" ItemsSource="{Binding}"/>
                    </ScrollViewer>
                    
                </StackPanel>
                
            </TabItem>
        </TabControl>
    </Grid>
</Window>
