Friday, March 21, 2014

Button inside WPF ComboBox

Introduction

A ComboBox control is an items control that works as a ListBox control but only one item from the collection is visible at a time and clicking on the ComboBox makes the collection visible and allows users to pick an item from the collection. Unlike a ListBox control, a ComboBox does not have multiple item selection. A ComboBox control is a combination of three controls - A Button, a Popup, and a TextBox. The Button control is used to show or hide available items and Popup control displays items and let user select one item from the list. The TextBox control then displays the selected item.
This article demonstrates how to create a custom ComboBox control in WPF.

Skeleton of the XAML

<Window x:Class="CustomDropdown.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        SizeToContent="WidthAndHeight"
        ResizeMode="CanMinimize"
        Loaded="Window_Loaded" >

    <Grid Margin="30">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>


        <ToggleButton Name ="button" Grid.Column="0" Grid.Row="2" Height="30" Width="200">
           
            <Grid Width="180" Margin="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="10"/>
                </Grid.ColumnDefinitions>

                <TextBlock  Grid.Column="0" Grid.Row="0" x:Name="txtblock" Text="{Binding ElementName=lstBox,Path=SelectedValue}"/>
               
                <Path Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z" IsEnabled="{Binding ElementName=button,Path=IsEnabled}">
                    <Path.Style>
                        <Style TargetType="{x:Type Path}">
                            <Setter Property="Fill" Value="Black" />
                            <Style.Triggers>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Fill" Value="Gray"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="True">
                                    <Setter Property="Fill" Value="Black"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Path.Style>
                </Path>

                <Popup Name="popUp"
                       Width="{Binding ElementName=button,Path=Width}"
                       PlacementTarget="{Binding ElementName=button}"
                       IsOpen="{Binding IsChecked, ElementName=button}"
                       StaysOpen="False"
                       Focusable="True"
                       AllowsTransparency="True"
                       PopupAnimation="Slide"
                       Placement="Top" >
                    <StackPanel>
                        <Button Name="btn"
                        Height="25"
                        IsDefault="True"
                        Click="Button_Click"
                        Focusable="False"
                        IsEnabled="{Binding ElementName=lstBox,Path=HasItems}">Click Me</Button>
                        <ListBox x:Name="lstBox" Focusable="True" TabIndex="1" KeyboardNavigation.TabNavigation="Continue" Height="400"/>
                    </StackPanel>

                </Popup>
            </Grid>
        </ToggleButton>

    </Grid>
</Window>

The structure of controls that are incorporated is shown below

The Path element is used to draw the arrow which looks as we expect. This is done in ToggleButton control template

Expected Output


External Resources


Awesome LinearGradientBrush

Introduction

A linear gradient brush paints an area with a linear gradient. The LinearGradientBrush object represents a linear gradient brush. The default value linear gradient value is diagonal. The StartPoint and EndPoint properties of the LinearGradientBrush represent the start and end points of a gradient. The default values of these properties is (0,0) and (1,1), which is upper-left corner to lower-right corner of an area.

Figure 1 and 2 shows a diagonal gradient.

Fig1. Linear Gradient


Fig2. Linear Gradient with Stops


Example of Linear Gradient Brush
This example shows how to use the LinearGradientBrush class to paint an area with a linear gradient.

<Window x:Class="LinearGradientBrushTutorial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Width="722" SizeToContent="Height" ResizeMode="NoResize">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary
                  Source="Theme.xaml">
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <WrapPanel FlowDirection="LeftToRight" Margin="10">

        <Rectangle Fill="{StaticResource CyanThemeBG}"/>
        <Rectangle Fill="{StaticResource MagentaBG}"/>
        <Rectangle Fill="{StaticResource BlackBG}"/>
        <Rectangle Fill="{StaticResource LightBG}"/>

        <Rectangle Fill="{StaticResource TealGreen}"/>
        <Rectangle Fill="{StaticResource CyanLargeBG}"/>
        <Rectangle Fill="{StaticResource MagentaLargeBG}"/>
        <Rectangle Fill="{StaticResource LightLargeBG}"/>

        <Rectangle Fill="{StaticResource GreenLargeBG}"/>
        <Rectangle Fill="{StaticResource PurpleBG}"/>
        <Rectangle Fill="{StaticResource DarkGreen}"/>
        <Rectangle Fill="{StaticResource DarkYellow}"/>

        <Rectangle Fill="{StaticResource DarkGrape}"/>
        <Rectangle Fill="{StaticResource DarkBrown}"/>
        <Rectangle Fill="{StaticResource ReflectedGradient}"/>
        <Rectangle Fill="{StaticResource ReflectedGradientBlue}"/>
        <Rectangle Fill="{StaticResource ReflectedGradientGray}"/>
        <Rectangle Fill="{StaticResource MulticoloredGradientRainbow}"/>
        <Rectangle Fill="{StaticResource DiagonalLinearGradientRainbow1}"/>
        <Rectangle Fill="{StaticResource DiagonalLinearGradientRainbow2}"/>
        <Rectangle Fill="{StaticResource DiagonalLinearGradient}"/>
        <Rectangle Fill="{StaticResource HorizontalLinearGradient1}"/>
        <Rectangle Fill="{StaticResource HorizontalLinearGradient2}"/>
        <Rectangle Fill="{StaticResource GradientStopCollection}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushSpreadMethodPad}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushSpreadMethodReflect}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushSpreadMethodRepeat}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrush}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushSpreadMethodPad}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushSpreadMethodReflect}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushSpreadMethodRepeat}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushOpp}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity1}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity2}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity3}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity4}"/>
    </WrapPanel>

</Window>

Theme File:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
    <Style TargetType="Rectangle">
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="BitmapEffect">
            <Setter.Value>
                <DropShadowBitmapEffect />
            </Setter.Value>
        </Setter>
    </Style>

    <LinearGradientBrush x:Key="CyanThemeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFC6ECFE"/>
        <GradientStop Color="#FF003FFF" Offset="1"/>
        <GradientStop Color="#FF37AFF9" Offset="0.5"/>
        <GradientStop Color="#FF0076DB" Offset="0.5"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="MagentaBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFCFFB" Offset="0"/>
        <GradientStop Color="#FF930E2F" Offset="1"/>
        <GradientStop Color="#FFFF659D" Offset="0.5"/>
        <GradientStop Color="#FFC7174B" Offset="0.5"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="BlackBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE5E7FA"/>
        <GradientStop Color="#FF747C8D" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF0F0F0F" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="LightBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE5E7FA"/>
        <GradientStop Color="#FFE3E6F5" Offset="0.5"/>
        <GradientStop Color="#FFD5DBF1" Offset="0.5"/>
        <GradientStop Color="#FFE1E4FF" Offset="1"/>
    </LinearGradientBrush>
   
   
    <LinearGradientBrush x:Key="TealGreen" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE3FCA9" Offset="0"/>
        <GradientStop Color="#FF82B03C" Offset="1"/>
        <GradientStop Color="#FFD8FA6C" Offset="0.5"/>
        <GradientStop Color="#FFE0FF98" Offset="0.5"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="CyanLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF003FFF" Offset="1"/>
        <GradientStop Color="#FF37AFF9" Offset="0"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="MagentaLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF930E2F" Offset="1"/>
        <GradientStop Color="#FFFF659D" Offset="0"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="LightLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE3E6F5" Offset="0"/>
        <GradientStop Color="#FF9D9D9D" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="GreenLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF82B03C" Offset="1"/>
        <GradientStop Color="#FFD8FA6C" Offset="0"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="PurpleBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFB0B8FF"/>
        <GradientStop Color="#FF747C8D" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF151733" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkGreen" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFB0FFC4"/>
        <GradientStop Color="#FF5D645F" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF15331F" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkYellow" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF3FFB0"/>
        <GradientStop Color="#FF63645D" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF2F3315" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkGrape" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFB0FD"/>
        <GradientStop Color="#FF8D7485" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF331532" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkBrown" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFEAB0"/>
        <GradientStop Color="#FF8D8774" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF332A15" Offset="1"/>
    </LinearGradientBrush>
 
    <LinearGradientBrush x:Key="ReflectedGradient" StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="Red" Offset="0"/>
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="ReflectedGradientBlue" StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="CadetBlue" Offset="0"/>
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="ReflectedGradientGray" StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="LightGray" Offset="0"/>
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="MulticoloredGradientRainbow" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="DiagonalLinearGradientRainbow1" StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="DiagonalLinearGradientRainbow2" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="DiagonalLinearGradient" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="BurlyWood" Offset="0" />
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="HorizontalLinearGradient1" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Brown" Offset="0" />
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="HorizontalLinearGradient2" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="MediumBlue" Offset="1"/>
        <GradientStop Color="White" Offset="0" />
    </LinearGradientBrush>

    <GradientStopCollection x:Key="CustomGradientStops">
        <GradientStop Offset="0.0" Color="White" />
        <GradientStop Offset="0.4" Color="Red" />
        <GradientStop Offset="0.5" Color="Yellow" />
        <GradientStop Offset="0.6" Color="Blue" />
        <GradientStop Offset="0.7" Color="Wheat" />
    </GradientStopCollection>
    <LinearGradientBrush x:Key="GradientStopCollection" GradientStops="{StaticResource CustomGradientStops}">
        <LinearGradientBrush.Transform>
            <RotateTransform CenterX="87.5" CenterY="45" Angle="45" />
        </LinearGradientBrush.Transform>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LinearGradientBrushSpreadMethodPad" StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Pad">
        <GradientStop Color="Chocolate" Offset="1"/>
        <GradientStop Color="Lavender" Offset="0" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LinearGradientBrushSpreadMethodReflect" StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Reflect">
        <GradientStop Color="White" Offset="1"/>
        <GradientStop Color="BurlyWood" Offset="0" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LinearGradientBrushSpreadMethodRepeat" StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Repeat">
        <GradientStop Color="White" Offset="1"/>
        <GradientStop Color="Turquoise" Offset="0" />
    </LinearGradientBrush>

    <RadialGradientBrush  x:Key="RadialGradientBrush">
        <GradientStop Color="White" Offset="0" />
        <GradientStop Color="Black" Offset="1" />
    </RadialGradientBrush >

    <RadialGradientBrush  x:Key="RadialGradientBrushSpreadMethodPad" SpreadMethod="Pad">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </RadialGradientBrush >

    <RadialGradientBrush  x:Key="RadialGradientBrushSpreadMethodReflect" SpreadMethod="Reflect">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </RadialGradientBrush >


    <RadialGradientBrush  x:Key="RadialGradientBrushSpreadMethodRepeat" SpreadMethod="Repeat">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </RadialGradientBrush >

    <RadialGradientBrush  x:Key="RadialGradientBrushOpp">
        <GradientStop Color="White" Offset="1" />
        <GradientStop Color="Black" Offset="0" />
    </RadialGradientBrush >

    <GradientStopCollection x:Key="CustomGradientStops1">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </GradientStopCollection>

    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity1" GradientStops="{StaticResource CustomGradientStops1}" Opacity="0.25"/>
    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity2" GradientStops="{StaticResource CustomGradientStops1}" Opacity="0.5"/>
    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity3" GradientStops="{StaticResource CustomGradientStops1}" Opacity="0.75"/>
    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity4" GradientStops="{StaticResource CustomGradientStops1}" Opacity="1"/>

</ResourceDictionary>

Expected  Output



External Resources