Author Archives: Dragos Niamtu

About Dragos Niamtu

XAML fanatic

XAML ComboBox Style

Hi,

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

Combobox

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.

XAML stylish ScrollBar

Hi again,

In this post i will present you a stylish ScrollBar.

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

WPF 2advanced ListView Style

Hi,

Sorry for not posting earlier anything yet, but i have been busy so i decided to start a series in which i will try to create all the controls you can see in the site www.2advanced.com and first i started with the ListView control and styled it like the one you can see in the site.

In the below image you can see more details.

Img 2advanced
So the only things that i styled here was the ListView and The ListViewItem.

ListView:

The template of the listview is very simple it has a border and in that border the default contentpresenters of the listview:

<Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="4">

     <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">

          <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

     </ScrollViewer>

</Border>

ListViewItem:

This control is a little bit complicated but not too much. So first is COntrolTemplate that it’s just a grid with 3 columns:

  1. a Path that draw the little corner as you can see it in the screenshot above;
  2. then a rectangle which is the little white “bulb” ;
  3. an finally the ContentPresenter;
<Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Path Margin="6,0,0,0" SnapsToDevicePixels="true" Grid.Column="0" x:Name="Path" Width="6" Height="5" Stretch="Fill" StrokeThickness="1" StrokeMiterLimit="2.75" Stroke="{TemplateBinding BorderBrush}" Data="F1 M 0,0L 0,5L 6,5"/>
<Rectangle Margin="6,0" x:Name="whiteSquare" SnapsToDevicePixels="true" Grid.Column="1" Fill="#FFFFFF" Width="3" Height="7">
<Rectangle.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="#ffffff" GlowSize="0" Opacity="1"/>
</Rectangle.BitmapEffect>
</Rectangle>
<ContentPresenter Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>

To make the animation on the trigger IsMouseOver i start and stop 2 storyboards.

<Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><BeginStoryboard Storyboard="{StaticResource FadeIn}"/></Trigger.EnterActions>

<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource FadeOut}"/>
</Trigger.ExitActions>
</Trigger>

To see the code for the storyboards download the whole project from here.

For the next post i will make the nice slick ScrollBar.