wpftoolkit/ExtendedWPFToolkitSolution/Src/Xceed.Wpf.Toolkit.LiveExplorer/CodeFiles/MaterialComboBoxView.xaml.txt

<!--*************************************************************************************

   Toolkit for WPF

   Copyright (C) 2007-2025 Xceed Software Inc.

   This program is provided to you under the terms of the XCEED SOFTWARE, INC.
   COMMUNITY LICENSE AGREEMENT (for non-commercial use) as published at 
   https://github.com/xceedsoftware/wpftoolkit/blob/master/license.md  

   For more features, controls, and fast professional support,
   pick up the Plus Edition at https://xceed.com/xceed-toolkit-plus-for-wpf/

   Stay informed: follow @datagrid on Twitter or Like http://facebook.com/datagrids

  ***********************************************************************************-->
<local:MaterialDemoView x:Class="Xceed.Wpf.Toolkit.LiveExplorer.Samples.MaterialControls.Views.MaterialComboBoxView"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="clr-namespace:Xceed.Wpf.Toolkit.LiveExplorer"
                        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
                        xmlns:sys="clr-namespace:System;assembly=mscorlib"
                        Title="MaterialComboBox">
   <local:DemoView.Description>
      <Paragraph FontSize="14"
                 FontFamily="Segoe">
         <Run>MaterialComboBox is a ComboBox that is using the Material Brushes and contains MaterialComboBoxItems.</Run>
         <LineBreak />
         <Run>MaterialComboBoxItems are ComboBoxItems that are using the Material Brushes. They use an ink animation when they are selected.</Run>
         <!--##INCLUDE_OPEN_SOURCE
         <LineBreak />
         <LineBreak />
         <Run>This feature is only available in the "Plus" version.</Run>
         <LineBreak />
         <Hyperlink NavigateUri="https://xceed.com/xceed-toolkit-plus-for-wpf" RequestNavigate="Hyperlink_RequestNavigate">
            Click here for more details about Xceed Toolkit Plus for WPF.
         </Hyperlink>
       ##END-->
      </Paragraph>
   </local:DemoView.Description>

   <!--##EXCLUDE_OPEN_SOURCE-->
   <local:DemoView.Resources>
      <ResourceDictionary>
         <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="../Resources/CommonResources.xaml" />
         </ResourceDictionary.MergedDictionaries>

         <xctk:SolidColorBrushToColorConverter x:Key="SolidColorBrushToColorConverter" />
      </ResourceDictionary>
   </local:DemoView.Resources>
   
   <Grid>
      <StackPanel Margin="10">

         <GroupBox Header="Features"
                   Margin="0,5,0,5">
            <Grid Margin="5">
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="135" />
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
               </Grid.RowDefinitions>

               <!-- First Column-->
               <TextBlock Grid.Column="0"
                          Grid.Row="0"
                          Text="Material Accent Brush: "
                          VerticalAlignment="Center" />
               <ComboBox Grid.Column="1"
                         Grid.Row="0"
                         ItemsSource="{Binding MaterialBrushes, RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
                         SelectedItem="{Binding MaterialAccentBrush, ElementName=materialComboBox}"
                         ItemTemplate="{StaticResource ColorItemTemplate}"
                         VerticalAlignment="Center"
                         Margin="5" />
               <TextBlock Grid.Column="0"
                          Grid.Row="1"
                          Text="Line Brush: "
                          VerticalAlignment="Center" />
               <ComboBox Grid.Column="1"
                         Grid.Row="1"
                         ItemsSource="{Binding MaterialBrushes, RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
                         SelectedItem="{Binding LineBrush, ElementName=materialComboBox}"
                         ItemTemplate="{StaticResource ColorItemTemplate}"
                         VerticalAlignment="Center"
                         Margin="5" />
               <TextBlock Grid.Column="0"
                          Grid.Row="2"
                          Text="Line Focus Brush: "
                          VerticalAlignment="Center" />
               <ComboBox Grid.Column="1"
                         Grid.Row="2"
                         ItemsSource="{Binding MaterialBrushes, RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
                         SelectedItem="{Binding LineFocusBrush, ElementName=materialComboBox}"
                         ItemTemplate="{StaticResource ColorItemTemplate}"
                         VerticalAlignment="Center"
                         Margin="5" />
               <TextBlock Text="Is Using fade Animation: "
                          Grid.Row="3"
                          Grid.Column="0"
                          VerticalAlignment="Center" />
               <CheckBox Grid.Column="1"
                         Grid.Row="3"
                         IsChecked="{Binding IsUsingFadeAnimation, ElementName=materialComboBox}"
                         VerticalAlignment="Center"
                         Margin="5" />

               <!-- Second Column -->
               <TextBlock Grid.Column="2"
                          Grid.Row="0"
                          Text="Is Ink Effect Active: "
                          VerticalAlignment="Center"
                          Margin="10,0,0,0"/>
               <CheckBox x:Name="inkEffectActiveCheckBox"
                         Grid.Column="3"
                         Grid.Row="0"
                         IsChecked="{Binding IsInkEffectActive, ElementName=materialComboBox}"
                         VerticalAlignment="Center"
                         Margin="5"
                         ToolTip="Can be set a MaterialComboBox control or individually on each MaterialComboBoxItem." />
               <TextBlock Grid.Column="2"
                          Grid.Row="1"
                          Text="Ink Effect Brush: "
                          VerticalAlignment="Center"
                          IsEnabled="{Binding IsChecked, ElementName=inkEffectActiveCheckBox}"
                          Style="{StaticResource DisableGrayText}"
                          Margin="10,0,0,0"/>
               <xctk:ColorPicker Grid.Column="3"
                                 Grid.Row="1"
                                 SelectedColor="{Binding InkEffectBrush, ElementName=materialComboBox, Converter={StaticResource SolidColorBrushToColorConverter}}"
                                 DisplayColorAndName="True"
                                 VerticalAlignment="Center"
                                 Width="125"
                                 Margin="5"
                                 IsEnabled="{Binding IsChecked, ElementName=inkEffectActiveCheckBox}"
                                 ToolTip="Can be set a MaterialComboBox control or individually on each MaterialComboBoxItem." />
               <TextBlock Grid.Column="2"
                          Grid.Row="2"
                          Text="Ink Effect Opacity: "
                          VerticalAlignment="Center"
                          IsEnabled="{Binding IsChecked, ElementName=inkEffectActiveCheckBox}"
                          Style="{StaticResource DisableGrayText}" 
                          Margin="10,0,0,0"/>
               <xctk:DoubleUpDown Grid.Column="3"
                                  Grid.Row="2"
                                  Value="{Binding InkEffectOpacity, ElementName=materialComboBox}"
                                  Minimum="0"
                                  Maximum="1"
                                  Increment="0.05"
                                  FormatString="N2"
                                  VerticalAlignment="Center"
                                  Margin="5"
                                  IsEnabled="{Binding IsChecked, ElementName=inkEffectActiveCheckBox}"
                                  ToolTip="Can be set a MaterialComboBox control or individually on each MaterialComboBoxItem." />
            </Grid>
         </GroupBox>

         <StackPanel>
            <TextBlock Text="Usage:"
                       Style="{StaticResource Header}" />

            <xctk:MaterialComboBox x:Name="materialComboBox"
                                   HorizontalAlignment="Center"
                                   IsInkEffectActive="True"
                                   IsUsingFadeAnimation="True"
                                   LineBrush="{Binding MaterialBrushes[17], RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
                                   Width="150">
               <xctk:MaterialComboBoxItem Content="First Item" />
               <xctk:MaterialComboBoxItem Content="Second Item"
                                          IsSelected="True" />
               <xctk:MaterialComboBoxItem Content="Third Item" />
               <xctk:MaterialComboBoxItem Content="Fourth Item" />
               <xctk:MaterialComboBoxItem Content="Fifth Item" />
            </xctk:MaterialComboBox>
         </StackPanel>
      </StackPanel>
   </Grid>
   <!--##END-->

   <!--##INCLUDE_OPEN_SOURCE
    <Image Source="..\OpenSourceImages\MaterialComboBox.png" Width="600" Height="400"/>
   ##END-->
</local:MaterialDemoView>