<HeaderedContentControl
    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:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d"
    d:DesignWidth="1280" d:DesignHeight="720"
    Style="{StaticResource SampleControlStyle}"
    Header="ComboBox"
    Tag="https://www.noesisengine.com/docs/Gui.Core._ComboBox.html">

    <StackPanel>
        <TextBlock Style="{StaticResource SampleSectionDesc}" Text="Use ComboBox to allow selection of one option at a time and when you need to minimize screen space. A ComboBox shows only the currently selected item."/>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/ac5483334a04214cb9eb6cf10609065e" TabIndex="100">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="Selection properties"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run>User can bind to</Run>
                        <Run FontWeight="Bold">SelectedIndex</Run><Run>,</Run>
                        <Run FontWeight="Bold">SelectedItem</Run> <Run>or</Run>
                        <Run FontWeight="Bold">SelectedValue</Run>
                        <Run>to be notified when selection changes. The</Run>
                        <Run FontWeight="Bold">SelectedValuePath</Run>
                        <Run>property specifies the path to the property that is used to determine the value of the SelectedValue property.</Run>
                    </TextBlock>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run>By setting the extension property</Run>
                        <Run FontWeight="Bold">noesis:Text.Placeholder</Run>
                        <Run>a hint text will be shown when ComboBox has nothing selected.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <ComboBox x:Name="Colors" noesis:Text.Placeholder="Pick a color" Margin="0,5,0,0" Width="150" HorizontalAlignment="Left" SelectedValuePath="Content">
                    <ComboBoxItem Content="Red"/>
                    <ComboBoxItem Content="Green"/>
                    <ComboBoxItem Content="Blue"/>
                </ComboBox>
                <Rectangle Fill="{Binding SelectedValue, ElementName=Colors}" Height="30" Margin="0,10,0,0"/>
            </StackPanel>
        </HeaderedContentControl>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/ea6388fab74a5691ed042d57f13c7a9a" TabIndex="200">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="IsEditable"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run>Enables or disables editing of the text in text box of the ComboBox.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="Font" Grid.Row="0" Grid.ColumnSpan="4" Text="{Binding SelectedItem, ElementName=FontFamilies, StringFormat='Samples/Fonts/#{0}'}" Visibility="Collapsed"/>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="Font: " VerticalAlignment="Center"/>
                <ComboBox Grid.Row="0" Grid.Column="2" x:Name="FontFamilies" SelectedIndex="0">
                    <sys:String>Muli</sys:String>
                    <sys:String>Courier Prime</sys:String>
                    <sys:String>Caladea</sys:String>
                </ComboBox>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="Size: " VerticalAlignment="Center"/>
                <ComboBox Grid.Row="1" Grid.Column="2" x:Name="FontSizes" Margin="0,8,0,0" IsEditable="True" SelectedIndex="4">
                    <sys:Double>8</sys:Double>
                    <sys:Double>9</sys:Double>
                    <sys:Double>10</sys:Double>
                    <sys:Double>12</sys:Double>
                    <sys:Double>14</sys:Double>
                    <sys:Double>18</sys:Double>
                    <sys:Double>24</sys:Double>
                    <sys:Double>32</sys:Double>
                </ComboBox>
                <TextBlock Grid.Row="3" Grid.ColumnSpan="4" Text="You can set the Font and Size of this text." TextWrapping="Wrap" FontFamily="{Binding Text, ElementName=Font}" FontSize="{Binding Text, ElementName=FontSizes}" Margin="0,12,0,0" HorizontalAlignment="Center"/>
            </Grid>
        </HeaderedContentControl>
    </StackPanel>
</HeaderedContentControl>