XAML (WPF) BLOG

Hi,

Today I have designed a slick ComboBox, which is composed of a ToggleButton and a PopUp.

Here is the code for TogleButton:

<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="IsTabStop" Value="false"/>

<Setter Property="Focusable" Value="false"/>

<Setter Property="ClickMode" Value="Press"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ToggleButton}">

<Border x:Name="Chrome" SnapsToDevicePixels="true" BorderBrush="#7F4FAD36" BorderThickness="0,0,1,1" CornerRadius="4,4,4,4">

<Border.Background>

<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#FFFFFFFF" Offset="0"/>

<GradientStop Color="#FFD7E9C1" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

<Grid HorizontalAlignment="Right" Width="20">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="3"/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Rectangle Width="1" Fill="{DynamicResource BurshDots}" Margin="0,3,0,4"/>

<Path Grid.Column="1" Fill="#FF436B13" HorizontalAlignment="Center" Margin="3,1,0,0" x:Name="Arrow" VerticalAlignment="Center" Data="{StaticResource DownArrowGeometry}"/>

</Grid>

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsChecked" Value="True">

<Setter Property="BorderThickness" TargetName="Chrome" Value="1,1,1,0"/>

<Setter Property="CornerRadius" TargetName="Chrome" Value="4,4,0,0"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

The style for the PopUp which actualy is in the template of the ComboBox:

<Popup Margin="1" x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2">

<Border x:Name="DropDownBorder" Background="#FFD7E9C1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding Path=ActualWidth, ElementName=MainGrid}" BorderBrush="#7F4FAD36" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4">

<ScrollViewer CanContentScroll="true">

<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>

</ScrollViewer>

</Border>

</Popup>

And here is the style for the ComboBox:

<Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">

<Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>

<Setter Property="Foreground" Value="#FF436B13"/>

<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>

<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>

<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

<Setter Property="Padding" Value="4,3"/>

<Setter Property="Margin" Value="5"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ComboBox}">

<Grid x:Name="MainGrid" SnapsToDevicePixels="true">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>

</Grid.ColumnDefinitions>

<Popup Margin="1" x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2">

<Border x:Name="DropDownBorder" Background="#FFD7E9C1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding Path=ActualWidth, ElementName=MainGrid}" BorderBrush="#7F4FAD36" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4">

<ScrollViewer CanContentScroll="true">

<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>

</ScrollViewer>

</Border>

</Popup>

<ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>

<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsHitTestVisible="false" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="HasItems" Value="false">

<Setter Property="Height" TargetName="DropDownBorder" Value="95"/>

</Trigger>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>

<Setter Property="Background" Value="#FFF4F4F4"/>

</Trigger>

<Trigger Property="IsGrouping" Value="true">

<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="FontFamily" Value="Tahoma"/>

<Setter Property="FontSize" Value="11"/>

<Style.Triggers>

<Trigger Property="IsEditable" Value="true">

<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>

<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>

<Setter Property="IsTabStop" Value="false"/>

<Setter Property="Padding" Value="3"/>

<Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>

</Trigger>

</Style.Triggers>

</Style>

Sources for the project and here is the Microsoft Expressions Design source which isthe drawing brush you can see between the arrow and the selected item.

Hi again,

In this post i will present you a stylish ScrollBar.

First of all i had to make a control template for the ScrollViewer to make it a little bit transparent:

<ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}"><Grid x:Name="Grid" Background="#7F000000">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Rectangle Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" x:Name="Corner" Grid.Column="1" Grid.Row="1"/>

<ScrollContentPresenter Margin="5,5,5,5" x:Name="PART_ScrollContentPresenter" Grid.Column="0" Grid.Row="0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>

<ScrollBar Cursor="Arrow" x:Name="PART_VerticalScrollBar" Style="{DynamicResource ScrollBarStyle}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Grid.Row="0" ViewportSize="{TemplateBinding ViewportHeight}" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="VerticalScrollBar"/>

<ScrollBar Cursor="Arrow" x:Name="PART_HorizontalScrollBar" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="0" Grid.Row="1" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="HorizontalScrollBar"/>

</Grid>

</ControlTemplate>

After that with the style for the ScrollBar in which i have elimintaed thetop and bottom button in the scroolbar and left only the thumb scroll button:

<Style x:Key="ScrollBarStyle" TargetType="{x:Type ScrollBar}"><Setter Property="Background" Value="{StaticResource VerticalScrollBarBackground}"/>

<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>

<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>

<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>

<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ScrollBar}">

<Grid x:Name="Bg" SnapsToDevicePixels="true" Margin="3">

<Border Width="1" Background="#FFFFFF" HorizontalAlignment="Center"/>

<Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}" IsDirectionReversed="true">

<Track.Thumb>

<Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/>

</Track.Thumb>

<Track.IncreaseRepeatButton>

<RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageDownCommand}"/>

</Track.IncreaseRepeatButton>

<Track.DecreaseRepeatButton>

<RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageUpCommand}"/>

</Track.DecreaseRepeatButton>

</Track>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

<Style.Triggers>

<Trigger Property="Orientation" Value="Horizontal">

<Setter Property="Width" Value="Auto"/>

<Setter Property="MinWidth" Value="0"/>

<Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>

<Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>

<Setter Property="Background" Value="{StaticResource HorizontalScrollBarBackground}"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ScrollBar}">

<Grid x:Name="Bg" SnapsToDevicePixels="true" Background="{TemplateBinding Background}">

<Grid.ColumnDefinitions>

<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>

<ColumnDefinition Width="0.00001*"/>

<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>

</Grid.ColumnDefinitions>

<RepeatButton Style="{StaticResource ScrollBarButton}" IsEnabled="{TemplateBinding IsMouseOver}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow" Command="{x:Static ScrollBar.LineLeftCommand}"/>

<Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Column="1">

<Track.DecreaseRepeatButton>

<RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageLeftCommand}"/>

</Track.DecreaseRepeatButton>

<Track.IncreaseRepeatButton>

<RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageRightCommand}"/>

</Track.IncreaseRepeatButton>

<Track.Thumb>

<Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>

</Track.Thumb>

</Track>

<RepeatButton Style="{StaticResource ScrollBarButton}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow" Command="{x:Static ScrollBar.LineRightCommand}"/>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Trigger>

</Style.Triggers>

</Style>And i have styled the thumb button which has a nice glow effect on mouseover:
<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"><Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="IsTabStop" Value="false"/>

<Setter Property="Width" Value="3"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type Thumb}">

<Border x:Name="Chrome" SnapsToDevicePixels="true" Background="#FFFFFFFF">

<Border.BitmapEffect>

<OuterGlowBitmapEffect GlowColor="#FFFFFFFF" GlowSize="4" Opacity="0.1"/>

</Border.BitmapEffect>

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="BitmapEffect" TargetName="Chrome">

<Setter.Value>

<OuterGlowBitmapEffect GlowColor="#FFFFFFFF" GlowSize="4" Opacity="1"/>

</Setter.Value>

</Setter>

<Setter Property="Cursor" Value="Hand"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>
Here is the code for the ScrollBar