ComboBoxes.xaml

<UserControl x:Class="MaterialDesignDemo.ComboBoxes"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sharedDomain="clr-namespace:MaterialDesignDemo.Shared.Domain;assembly=MaterialDesignDemo.Shared"
             xmlns:converters="clr-namespace:MaterialDesignDemo.Shared.Converters;assembly=MaterialDesignDemo.Shared"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:demoAppDomain="clr-namespace:MaterialDesignDemo.Domain"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:materialDesignDemo="clr-namespace:MaterialDesignDemo"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
             d:DataContext="{d:DesignInstance sharedDomain:ComboBoxesViewModel,
                                              IsDesignTimeCreatable=False}"
             d:DesignHeight="1080"
             d:DesignWidth="1920"
             mc:Ignorable="d">
  <UserControl.Resources>
    <Style TargetType="{x:Type smtx:XamlDisplay}" BasedOn="{StaticResource {x:Type smtx:XamlDisplay}}">
      <Setter Property="Margin" Value="8,0" />
      <Setter Property="VerticalAlignment" Value="Bottom" />
    </Style>
  </UserControl.Resources>

  <StackPanel VerticalAlignment="Top">
    <TextBlock Style="{StaticResource PageTitleTextBlock}" Text="ComboBox" />

    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Default" />

    <StackPanel Orientation="Horizontal">
      <StackPanel.Resources>
        <Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">
          <Setter Property="Width" Value="96" />
        </Style>
      </StackPanel.Resources>

      <smtx:XamlDisplay Margin="0,0,8,0" UniqueKey="comboboxes_1">
        <ComboBox materialDesign:HintAssist.Hint="OS">
          <ComboBoxItem Content="Android" />
          <ComboBoxItem Content="iOS" />
          <ComboBoxItem Content="Linux" />
          <ComboBoxItem Content="Windows" />
        </ComboBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay UniqueKey="comboboxes_2">
        <ComboBox materialDesign:ComboBoxAssist.MaxLength="2"
                  materialDesign:HintAssist.Hint="Search"
                  materialDesign:HintAssist.HintOpacity=".26"
                  IsEditable="True">
          <ComboBoxItem Content="Apple" />
          <ComboBoxItem Content="Banana" />
          <ComboBoxItem Content="Pear" />
          <ComboBoxItem Content="Orange" />
        </ComboBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay UniqueKey="comboboxes_11">
        <ComboBox materialDesign:HintAssist.Hint="Prefix"
                  materialDesign:TextFieldAssist.PrefixText="$"
                  IsEditable="True">
          <ComboBoxItem Content="Android" />
          <ComboBoxItem Content="iOS" />
          <ComboBoxItem Content="Linux" />
          <ComboBoxItem Content="Windows" />
        </ComboBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay UniqueKey="comboboxes_3">
        <ComboBox MinWidth="128"
                  materialDesign:ColorZoneAssist.Mode="SecondaryLight"
                  materialDesign:HintAssist.HelperText="Select one OS"
                  materialDesign:HintAssist.Hint="OS"
                  materialDesign:TextFieldAssist.HasClearButton="True"
                  materialDesign:TextFieldAssist.SuffixText="sw"
                  materialDesign:TextFieldAssist.UnderlineBrush="{DynamicResource SecondaryHueMidBrush}"
                  Style="{StaticResource MaterialDesignFloatingHintComboBox}">
          <ComboBoxItem Content="Android" />
          <ComboBoxItem Content="iOS" />
          <ComboBoxItem Content="Linux" />
          <ComboBoxItem Content="Windows" />
        </ComboBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay UniqueKey="comboboxes_4">
        <ComboBox materialDesign:HintAssist.Hint="Disabled Combo with Hint"
                  materialDesign:HintAssist.IsFloating="True"
                  IsEnabled="False">
          <ComboBoxItem Content="Selected" IsSelected="True" />
        </ComboBox>
      </smtx:XamlDisplay>
    </StackPanel>

    <StackPanel Margin="0,16,0,0" Orientation="Horizontal">
      <StackPanel.Resources>
        <Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">
          <Setter Property="HorizontalAlignment" Value="Left" />
          <Setter Property="Margin" Value="0,8,0,0" />
        </Style>
      </StackPanel.Resources>

      <smtx:XamlDisplay Margin="0" UniqueKey="comboboxes_9">

        <StackPanel>
          <CheckBox x:Name="DisplaySelectedItemCheckBox"
                    Margin="0,8,0,0"
                    Content="Display Selected Item In Drop Down"
                    IsThreeState="False" />

          <ComboBox materialDesign:ComboBoxAssist.ShowSelectedItem="{Binding ElementName=DisplaySelectedItemCheckBox, Path=IsChecked}">
            <ComboBoxItem Content="Apple" IsSelected="True" />
            <ComboBoxItem Content="Banana" />
            <ComboBoxItem Content="Pear" />
            <ComboBoxItem Content="Orange" />
          </ComboBox>
        </StackPanel>
      </smtx:XamlDisplay>

    </StackPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Long Lists" />

    <StackPanel Orientation="Horizontal">
      <smtx:XamlDisplay Margin="0" UniqueKey="comboboxes_5">
        <ComboBox MinWidth="72"
                  materialDesign:HintAssist.Hint="Virtualisation"
                  ItemsSource="{Binding LongIntegerList}"
                  SelectedValue="{Binding SelectedValueOne}">

          <ComboBox.SelectedItem>
            <Binding Mode="TwoWay"
                     Path="SelectedValueOne"
                     UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <demoAppDomain:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </ComboBox.SelectedItem>
        </ComboBox>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="comboboxes_6">

        <ComboBox MinWidth="72"
                  materialDesign:HintAssist.Hint="(editable)"
                  IsEditable="True"
                  ItemsSource="{Binding LongIntegerList}">
          <ComboBox.Text>
            <Binding Mode="TwoWay"
                     Path="SelectedTextTwo"
                     UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <demoAppDomain:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </ComboBox.Text>
        </ComboBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay UniqueKey="comboboxes_7">
        <ComboBox materialDesign:HintAssist.Hint="(float hint)"
                  ItemsSource="{Binding LongIntegerList}"
                  Style="{StaticResource MaterialDesignFloatingHintComboBox}" />
      </smtx:XamlDisplay>
      <smtx:XamlDisplay UniqueKey="comboboxes_8">
        <ComboBox MinWidth="72"
                  materialDesign:HintAssist.FloatingScale="1.5"
                  materialDesign:HintAssist.Hint="(large float hint)"
                  ItemsSource="{Binding LongIntegerList}"
                  Style="{StaticResource MaterialDesignFloatingHintComboBox}" />
      </smtx:XamlDisplay>
      <smtx:XamlDisplay UniqueKey="comboboxes_12">
        <ComboBox MinWidth="72"
                  materialDesign:HintAssist.FontFamily="Verdana"
                  materialDesign:HintAssist.Hint="(Change fontfamily float hint)"
                  ItemsSource="{Binding LongStringList}"
                  Style="{StaticResource MaterialDesignFloatingHintComboBox}" />
      </smtx:XamlDisplay>
    </StackPanel>

    <StackPanel Margin="0,40,0,0" Orientation="Horizontal">
      <materialDesign:PackIcon Margin="0,0,5,0" Kind="Information" />
      <TextBlock VerticalAlignment="Center" Text="ComboBoxes are virtualized by default in the library" />

    </StackPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Filled" />

    <StackPanel Orientation="Horizontal">
      <smtx:XamlDisplay Margin="0,0,8,0"
                        HorizontalAlignment="Left"
                        UniqueKey="comboboxes_filled_combobox">
        <StackPanel>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition />
              <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <CheckBox x:Name="FilledComboBoxEnabledCheckBox"
                      Margin="0,0,0,8"
                      Content="Enabled"
                      IsChecked="True" />

            <Button Grid.Column="1"
                    HorizontalAlignment="Right"
                    Click="ClearFilledComboBox_Click"
                    Content="Clear"
                    Style="{StaticResource MaterialDesignFlatButton}" />
          </Grid>

          <ComboBox x:Name="FilledComboBox"
                    Width="256"
                    materialDesign:HintAssist.Hint="Some item with a very long hint text that will cut off when floating"
                    IsEnabled="{Binding Path=IsChecked, ElementName=FilledComboBoxEnabledCheckBox}"
                    Style="{StaticResource MaterialDesignFilledComboBox}">
            <ComboBoxItem Content="Item 1" />
            <ComboBoxItem Content="Item 2" />
            <ComboBoxItem Content="Item 3" />
          </ComboBox>
        </StackPanel>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="comboboxes_validation_filled_combobox">
        <ComboBox Width="256"
                  materialDesign:HintAssist.Hint="Validation test (editable)"
                  materialDesign:TextFieldAssist.HasClearButton="True"
                  IsEditable="True"
                  ItemsSource="{Binding ShortStringList}"
                  Style="{StaticResource MaterialDesignFilledComboBox}">
          <ComboBox.SelectedItem>
            <Binding Mode="TwoWay"
                     Path="SelectedValidationFilled"
                     UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <demoAppDomain:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </ComboBox.SelectedItem>
        </ComboBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="comboboxes_helpertext_filled_combobox">

        <ComboBox Width="256"
                  materialDesign:HintAssist.HelperText="Helper text"
                  materialDesign:HintAssist.Hint="With helper text"
                  Style="{StaticResource MaterialDesignFilledComboBox}">
          <ComboBoxItem Content="Item 1" />
          <ComboBoxItem Content="Item 2" />
          <ComboBoxItem Content="Item 3" />
        </ComboBox>
      </smtx:XamlDisplay>
    </StackPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Outlined" />

    <StackPanel Margin="0,0,0,16" Orientation="Horizontal">
      <smtx:XamlDisplay Margin="0,0,8,0"
                        HorizontalAlignment="Left"
                        UniqueKey="comboboxes_outlined_combobox">
        <StackPanel>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition />
              <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <CheckBox x:Name="OutlinedComboBoxEnabledCheckBox"
                      Margin="0,0,0,8"
                      Content="Enabled"
                      IsChecked="True" />

            <Button Grid.Column="1"
                    HorizontalAlignment="Right"
                    Click="ClearOutlinedComboBox_Click"
                    Content="Clear"
                    Style="{StaticResource MaterialDesignFlatButton}" />
          </Grid>

          <ComboBox x:Name="OutlinedComboBox"
                    Width="256"
                    materialDesign:HintAssist.Hint="Some item"
                    IsEnabled="{Binding Path=IsChecked, ElementName=OutlinedComboBoxEnabledCheckBox}"
                    ItemsSource="{Binding ShortStringList}"
                    Style="{StaticResource MaterialDesignOutlinedComboBox}" />
        </StackPanel>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="comboboxes_validation_outlined_combobox">
        <ComboBox Width="256"
                  materialDesign:HintAssist.Hint="Validation test"
                  materialDesign:TextFieldAssist.HasClearButton="True"
                  ItemsSource="{Binding ShortStringList}"
                  Style="{StaticResource MaterialDesignOutlinedComboBox}">
          <ComboBox.SelectedItem>
            <Binding Mode="TwoWay"
                     Path="SelectedValidationOutlined"
                     UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <demoAppDomain:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </ComboBox.SelectedItem>
        </ComboBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="comboboxes_helpertext_outlined_combobox">

        <ComboBox Width="256"
                  materialDesign:HintAssist.HelperText="Helper text"
                  materialDesign:HintAssist.Hint="With helper text"
                  Style="{StaticResource MaterialDesignOutlinedComboBox}">
          <ComboBoxItem Content="Item 1" />
          <ComboBoxItem Content="Item 2" />
          <ComboBoxItem Content="Item 3" />
        </ComboBox>
      </smtx:XamlDisplay>
    </StackPanel>

    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Rotation Clockwise" />

    <StackPanel Margin="0,8,0,0">
      <CheckBox x:Name="CheckBoxClockwiseRotateContent"
                Margin="16,0"
                Content="Rotate drop-down content"
                IsChecked="False" />
      <StackPanel Margin="16,15,0,0" Orientation="Horizontal">

        <smtx:XamlDisplay Margin="0" UniqueKey="clockwise_1">
          <ComboBox Width="150"
                    materialDesign:ComboBoxAssist.CustomPopupPlacementCallback="{x:Static materialDesignDemo:ComboBoxes.Rotate90DegreesClockWiseCallback}"
                    materialDesign:HintAssist.Hint="Selected Item"
                    Style="{StaticResource MaterialDesignFloatingHintComboBox}">
            <ComboBox.LayoutTransform>
              <RotateTransform Angle="90" />
            </ComboBox.LayoutTransform>
            <ComboBox.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical">
                  <StackPanel.LayoutTransform>
                    <RotateTransform Angle="{Binding ElementName=CheckBoxClockwiseRotateContent, Path=IsChecked, Converter={converters:BooleanToDoubleConverter TrueValue=-90, FalseValue=0}}" />
                  </StackPanel.LayoutTransform>
                </StackPanel>
              </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
            <ComboBoxItem Content="Item 1" />
            <ComboBoxItem Content="Item 2" />
            <ComboBoxItem Content="Item 3" />
            <ComboBoxItem Content="Item 4" />
          </ComboBox>
        </smtx:XamlDisplay>

        <smtx:XamlDisplay Margin="150,0" UniqueKey="clockwise_2">
          <ComboBox Width="150"
                    materialDesign:ComboBoxAssist.CustomPopupPlacementCallback="{x:Static materialDesignDemo:ComboBoxes.Rotate90DegreesClockWiseCallback}"
                    materialDesign:HintAssist.Hint="Selected Item"
                    Style="{StaticResource MaterialDesignFilledComboBox}">
            <ComboBox.LayoutTransform>
              <RotateTransform Angle="90" />
            </ComboBox.LayoutTransform>
            <ComboBox.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical">
                  <StackPanel.LayoutTransform>
                    <RotateTransform Angle="{Binding ElementName=CheckBoxClockwiseRotateContent, Path=IsChecked, Converter={converters:BooleanToDoubleConverter TrueValue=-90, FalseValue=0}}" />
                  </StackPanel.LayoutTransform>
                </StackPanel>
              </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
            <ComboBoxItem Content="Item 1" />
            <ComboBoxItem Content="Item 2" />
            <ComboBoxItem Content="Item 3" />
            <ComboBoxItem Content="Item 4" />
          </ComboBox>
        </smtx:XamlDisplay>

        <smtx:XamlDisplay Margin="0" UniqueKey="clockwise_3">
          <ComboBox Width="150"
                    materialDesign:ComboBoxAssist.CustomPopupPlacementCallback="{x:Static materialDesignDemo:ComboBoxes.Rotate90DegreesClockWiseCallback}"
                    materialDesign:HintAssist.Hint="Selected Item"
                    Style="{StaticResource MaterialDesignOutlinedComboBox}">
            <ComboBox.LayoutTransform>
              <RotateTransform Angle="90" />
            </ComboBox.LayoutTransform>
            <ComboBox.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical">
                  <StackPanel.LayoutTransform>
                    <RotateTransform Angle="{Binding ElementName=CheckBoxClockwiseRotateContent, Path=IsChecked, Converter={converters:BooleanToDoubleConverter TrueValue=-90, FalseValue=0}}" />
                  </StackPanel.LayoutTransform>
                </StackPanel>
              </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
            <ComboBoxItem Content="Item 1" />
            <ComboBoxItem Content="Item 2" />
            <ComboBoxItem Content="Item 3" />
            <ComboBoxItem Content="Item 4" />
          </ComboBox>
        </smtx:XamlDisplay>

      </StackPanel>
    </StackPanel>

    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Rotation Counter-Clockwise" />

    <StackPanel Margin="0,8,0,0">
      <CheckBox x:Name="CheckBoxCounterClockwiseRotateContent"
                Margin="16,0"
                Content="Rotate drop-down content"
                IsChecked="False" />
      <StackPanel Margin="16,15,0,0" Orientation="Horizontal">

        <smtx:XamlDisplay Margin="0" UniqueKey="counter_clockwise_1">
          <ComboBox Width="150"
                    materialDesign:ComboBoxAssist.CustomPopupPlacementCallback="{x:Static materialDesignDemo:ComboBoxes.Rotate90DegreesCounterClockWiseCallback}"
                    materialDesign:HintAssist.Hint="Selected Item"
                    Style="{StaticResource MaterialDesignFloatingHintComboBox}">
            <ComboBox.LayoutTransform>
              <RotateTransform Angle="-90" />
            </ComboBox.LayoutTransform>
            <ComboBox.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical">
                  <StackPanel.LayoutTransform>
                    <RotateTransform Angle="{Binding ElementName=CheckBoxCounterClockwiseRotateContent, Path=IsChecked, Converter={converters:BooleanToDoubleConverter TrueValue=90, FalseValue=0}}" />
                  </StackPanel.LayoutTransform>
                </StackPanel>
              </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
            <ComboBoxItem Content="Item 1" />
            <ComboBoxItem Content="Item 2" />
            <ComboBoxItem Content="Item 3" />
            <ComboBoxItem Content="Item 4" />
          </ComboBox>
        </smtx:XamlDisplay>

        <smtx:XamlDisplay Margin="150,0" UniqueKey="counter_clockwise_2">
          <ComboBox Width="150"
                    materialDesign:ComboBoxAssist.CustomPopupPlacementCallback="{x:Static materialDesignDemo:ComboBoxes.Rotate90DegreesCounterClockWiseCallback}"
                    materialDesign:HintAssist.Hint="Selected Item"
                    Style="{StaticResource MaterialDesignFilledComboBox}">
            <ComboBox.LayoutTransform>
              <RotateTransform Angle="-90" />
            </ComboBox.LayoutTransform>
            <ComboBox.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical">
                  <StackPanel.LayoutTransform>
                    <RotateTransform Angle="{Binding ElementName=CheckBoxCounterClockwiseRotateContent, Path=IsChecked, Converter={converters:BooleanToDoubleConverter TrueValue=90, FalseValue=0}}" />
                  </StackPanel.LayoutTransform>
                </StackPanel>
              </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
            <ComboBoxItem Content="Item 1" />
            <ComboBoxItem Content="Item 2" />
            <ComboBoxItem Content="Item 3" />
            <ComboBoxItem Content="Item 4" />
          </ComboBox>
        </smtx:XamlDisplay>

        <smtx:XamlDisplay Margin="0" UniqueKey="counter_clockwise_3">
          <ComboBox Width="150"
                    materialDesign:ComboBoxAssist.CustomPopupPlacementCallback="{x:Static materialDesignDemo:ComboBoxes.Rotate90DegreesCounterClockWiseCallback}"
                    materialDesign:HintAssist.Hint="Selected Item"
                    Style="{StaticResource MaterialDesignOutlinedComboBox}">
            <ComboBox.LayoutTransform>
              <RotateTransform Angle="-90" />
            </ComboBox.LayoutTransform>
            <ComboBox.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical">
                  <StackPanel.LayoutTransform>
                    <RotateTransform Angle="{Binding ElementName=CheckBoxCounterClockwiseRotateContent, Path=IsChecked, Converter={converters:BooleanToDoubleConverter TrueValue=90, FalseValue=0}}" />
                  </StackPanel.LayoutTransform>
                </StackPanel>
              </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
            <ComboBoxItem Content="Item 1" />
            <ComboBoxItem Content="Item 2" />
            <ComboBoxItem Content="Item 3" />
            <ComboBoxItem Content="Item 4" />
          </ComboBox>
        </smtx:XamlDisplay>

      </StackPanel>
    </StackPanel>

  </StackPanel>
</UserControl>