Before I post my code let me post image where you can easily notice what's acctually happening:
And as you can see on text boxes, border thickness is not same on every side.
In case of textbox it is much more brighter on the right for example.
Also on combobox there is something like shadow on top and on left side..
How could I fix this, I simply want 1px blue border around my controls..
And here is my code:
<ComboBox Name="cmbComboBoxOne" Height="40" BorderThickness="1" VerticalAlignment="Center" BorderBrush="#0091EA" ></ComboBox>
<TextBox Name="txtTextBoxOne" TextWrapping="Wrap" Text="TextBox" BorderThickness="1" BorderBrush="#0091EA" />
EDIT:
I applied Edit Template Copy, I set border thickness to 1 and colour to purple, and it looks like this:
So guys, again it is not good with thickness:1 px, for example with thickness:2px its awesome, all sides are equal but 2px is too much for me..
Here is my code after I edited template:
<TextBox x:Name="txtName" Grid.Column="1" SnapsToDevicePixels="True" UseLayoutRounding="True" Grid.Row="0" Margin="5,0,10,0" TextWrapping="Wrap" Text="TextBox" Height="40" VerticalAlignment="Center" Style="{DynamicResource TextBoxStyle1}" >
<TextBox.Resources>
<Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
<Setter Property="BorderBrush" Value="Purple"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Microsoft_Windows_Themes:ClassicBorderDecorator x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" BorderStyle="Sunken" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="PART_ContentHost"/>
</Microsoft_Windows_Themes:ClassicBorderDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Resources>
</TextBox>
as you can see guys
<Setter Property="BorderBrush" Value="Purple"/>
<Setter Property="BorderThickness" Value="1"/>
are set, but result is somehow same :/
Try to set the SnapsToDevicePixels and/or UseLayoutRounding properties to True:
<ComboBox Name="cmbComboBoxOne" ... SnapsToDevicePixels="True" UseLayoutRounding="True" />
If this doesn't work you could try to modify the control template of the controls. Right-click on them in design mode in Visual Studio 2012+ or Blend and choose Edit Template->Edit a Copy to copy the default templates into your XAML markup and then set the above properties on the Border elements in the generated templates.
Edit: Replace the ClassicBorderDecorator with an ordinary Border element:
<TextBox x:Name="txtName" Grid.Column="1" SnapsToDevicePixels="True" UseLayoutRounding="True" Grid.Row="0" Margin="5,0,10,0" TextWrapping="Wrap" Text="TextBox" Height="40" VerticalAlignment="Center" Style="{DynamicResource TextBoxStyle1}" >
<TextBox.Resources>
<Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
<Setter Property="BorderBrush" Value="Purple"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Resources>
</TextBox>
If you want to customize textbox and combobox border you need to change default style and template of these controls by right click on control and select edit template.
Related
code show as below:
This is part of my custom datagrid appearance.
<Style x:Key="DatagridStyle_1" TargetType="DataGrid">
<!--<Setter Property="ColumnHeaderStyle" Value="{DynamicResource Datagrid_HearderStyle_1}"/>
<Setter Property="CellStyle" Value="{DynamicResource Datagrid_CellStyle_1}"/>-->
<Setter Property="RowStyle" Value="{DynamicResource ConTemplate_DgRow_1}"/>
<Setter Property="GridLinesVisibility" Value="None" />
<Setter Property="AlternationCount" Value="2"/>
<!--<Setter Property="Template" Value="{DynamicResource DataGridTemplate1211}"/>-->
<Style x:Key="ConTemplate_DgRow_1" TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridRow">
<Grid SnapsToDevicePixels="True" Background="Transparent">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1"
>
</Border>
<DataGridCellsPresenter Grid.Column="1"
ItemsPanel="{TemplateBinding ItemsPanel}"
/>
</Grid>
<!--<Border BorderThickness="1" Background="LightGreen" SnapsToDevicePixels="True">
<DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}"/>
</Border>-->
<ControlTemplate.Triggers>
<!--<Trigger Property="IsSelected" Value="true">
<Setter Property="BorderBrush" Value="#00BCD4"/>
</Trigger>-->
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" Value="#00BCD4"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="AlternationIndex" Value="0">
<Setter Property="Background" Value="DarkBlue"/>
<Setter Property="Foreground" Value="LightGreen"/>
</Trigger>
</Style.Triggers>
</Style>
this part doesn't work,but the other part
<Setter Property="Foreground" Value="LightGreen"/> works fine
In the above code, I set the AlternationIndex trigger in the penultimate part of the code. In the same trigger, the Foreground property has already taken effect, but the Background property has never taken effect. I have modified the cell template and datagrid template before, and set their background color to transparent, but it has no effect.
I'd like to understand why this is the case and how to make setting the background color work.
I am new to XAML and WPF and so far I found a lot of good explanations on SO for different things I needed during my work on the project. I come from the web area where I have a lot of experience making graphic elements layouts for web pages using CSS. What really frustrates me is that I have no idea how make some custom nice looking UI in a WPF page, when I get a mock file (as attached).
In particular to this file, I need to place buttons which have a border on the left and an additional square on the right. The color of both depends on the button state. If the button is pressed, the color of the left border and right square should be green (as depicted in the screenshot).
Is there any way similar or at least near to CSS that I coud use to achieve this?
Your general layout suggests that you have a collection of states that you want ot be represented as a list of buttons. These buttons should be togglable and display green when toggled. In this case, an ItemsControl would be suitable, since you do not want or need selection, but interaction with buttons.
For the buttons itself, there is a lot more to do. The visual representation and state are defined in a control template. You can either create a new one from scratch or copy the default control template and adapt it. Here I have created a control template for ToggleButton that reflects your mockup.
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="Black"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="LawnGreen"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="Black"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="DarkGreen"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="Black"/>
<SolidColorBrush x:Key="Button.IsChecked.Background" Color="Green"/>
<SolidColorBrush x:Key="Button.IsChecked.Border" Color="Black"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="Lr" Grid.Column="0" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Width="20" Height="40"/>
<Border x:Name="Bd" Grid.Column="1" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<Rectangle x:Name="Rr" Grid.Column="2" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Width="40" Height="40" Margin="40, 0, 0, 0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="Lr" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="Fill" TargetName="Rr" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Button.MouseOver.Border}"/>
<Setter Property="Stroke" TargetName="Lr" Value="{StaticResource Button.MouseOver.Border}"/>
<Setter Property="Stroke" TargetName="Rr" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="Lr" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="Fill" TargetName="Rr" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Button.Pressed.Border}"/>
<Setter Property="Stroke" TargetName="Lr" Value="{StaticResource Button.Pressed.Border}"/>
<Setter Property="Stroke" TargetName="Rr" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Fill" TargetName="Lr" Value="{StaticResource Button.IsChecked.Background}"/>
<Setter Property="Fill" TargetName="Rr" Value="{StaticResource Button.IsChecked.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Button.IsChecked.Border}"/>
<Setter Property="Stroke" TargetName="Lr" Value="{StaticResource Button.IsChecked.Border}"/>
<Setter Property="Stroke" TargetName="Rr" Value="{StaticResource Button.IsChecked.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="Lr" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="Fill" TargetName="Rr" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="Stroke" TargetName="Lr" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="Stroke" TargetName="Rr" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In essence, the control template consists of a Grid that host two rectangles for the state color, and a ContentPresenter in between that shows the content. There are triggers for the different states, that set the color of the rectangles accordingly. The toggled state is active when IsChecked is true, IsPressed is active as you are pressing the mouse button on the button.
For more information on how to create custom control templates, please refer to the documentation.
How to create a template for a control (WPF.NET)
Now you need to create an ItemsControl, bind your collection and add a DataTemplate. The data template defines how the data items are represented, see Data Templating Overview.
<DockPanel>
<Border DockPanel.Dock="Top"
BorderBrush="Black"
BorderThickness="1"
Margin="0, 0, 0, 40">
<TextBlock Text="States"
TextAlignment="Center"/>
</Border>
<ScrollViewer>
<ItemsControl ItemsSource="{Binding StringItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ToggleButton Content="{Binding}"
Style="{StaticResource ToggleButtonStyle}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
That is it and this is what the result looks like:
XAML:
<RadioButton Margin="15" Grid.Row="0" Grid.Column="3" Style=" {StaticResource SpeedButtonStyle}" Content="TEST"/>
Style:
<!-- Speed Button Style -->
<Style x:Key="SpeedButtonStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="FontSize" Value="18px"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Background" Value="{StaticResource SidePanelButtonBgInactive}"/>
<Setter Property="Foreground" Value="White"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SidePanelButtonBgActive}"/>
<Setter Property="Foreground" Value="{StaticResource SidePanelButtonFgActive}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderThickness" Value="30"/>
<Setter Property="BorderBrush" Value="White" />
<Setter Property="Background" Value="{StaticResource SidePanelButtonBgActive}"/>
<Setter Property="Foreground" Value="{StaticResource SidePanelButtonFgActive}"/>
</Trigger>
</Style.Triggers>
</Style>
I am trying to change the size of the border on my radio button which is styled like a toggle button. I can change the colour of the border but not the size. it seems to be using the default size which is realy thin.
I'm using my templated ToggleRadioButton and you can achieve it by binding BorderThickness to its templated parent.
<Style TargetType="RadioButton" x:Key="SpeedButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ControlTemplate.Resources>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ControlTemplate.Resources>
<ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}">
</ToggleButton>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="18px"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="DarkRed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="BorderBrush" Value="White" />
<Setter Property="Background" Value="Green"/>
<Setter Property="Foreground" Value="LightSeaGreen"/>
</Trigger>
</Style.Triggers>
</Style>
EDIT:
I think you had completely different problem. Trigger on IsMouseOver or IsChecked doesn't get rid of default Windows hover colours. So you have to get rid of that, which is achieved but templating ToggleButton with a Border on top of templating your RadioButton with that styled ToggleButton. Note that if you would want to modify it more, you have to bind it's properties in the Border as well in ToggleButton. Difference between TemplateBinding and Binding on TemplatedParent is here and furthermore TemplateBinding is only One Way, so IsChecked should be on TemplatedParent.
This should work now (at least for me it did in new project), just replace the colours.
From what I understand, ListView has 2 themeing styles, one that it uses when you don't specify a View and one it uses when you do.
<HeaderedContentControl Header="No GridView" Margin="10">
<ListView>
<ListView.ItemsSource>
<x:Array Type="{x:Type sys:String}">
<sys:String>A</sys:String>
<sys:String>B</sys:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
</HeaderedContentControl>
<HeaderedContentControl Header="GridView"
Margin="10">
<ListView>
<ListView.View>
<GridView>
<GridViewColumn Header="Content" />
</GridView>
</ListView.View>
<ListView.ItemsSource>
<x:Array Type="{x:Type sys:String}">
<sys:String>A</sys:String>
<sys:String>B</sys:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
</HeaderedContentControl>
How do I style these? .. for example if I was making a custom theme?
I thought I would take a look at an existing theme, so I've downloaded the Luna theme from https://msdn.microsoft.com/en-us/library/aa972127(v=VS.90).aspx and added it as a resource. (I've added a button so you can see it is indeed using the luna theme)
But you'll notice that the Listview, other than the column header bit is the same. So it appears that the GridView styling in the luna theme isn't even used? I can go in and change the GridViewItemContainerStyleKey and it has no affect. It always appears to use the aero style
For reference, here is the GridView styling taken from the Luna theme :
<Style x:Key="{x:Static GridView.GridViewStyleKey}"
TargetType="{x:Type ListView}">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush"
Value="{StaticResource ListBorder}"/>
<Setter Property="BorderThickness"
Value="1"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll"
Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}"
Padding="{TemplateBinding Padding}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false"/>
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Bd"
Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Static GridView.GridViewItemContainerStyleKey}"
TargetType="{x:Type ListViewItem}">
<Setter Property="Background"
Value="Transparent"/>
<Setter Property="VerticalContentAlignment"
Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter TargetName="Bd"
Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected"
Value="true"/>
<Condition Property="Selector.IsSelectionActive"
Value="false"/>
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Just dump the complete control template out using Expression Blend. The ones on MSDN aren't the real ones.
The header control items are GridiewColumnHeader controls. So you just target them as you normally would:
<Window.Resources>
<Style TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Background" Value="Red" />
</Style>
</Window.Resources>
This will turn your header red. If you want to dump out the real "runtime" template in Blend...
1) go into the XAML
2) update client XAML to:
<Grid>
<GridViewColumnHeader />
</Grid>
3) View | Objects & Timelines
4) You should see your window hierarchy there...
Window
Grid
GridViewColumnHeader
5) Select GridViewColumnHeader
6) Right click | Edit Template | Edit A Copy | OK
Then just modify / clean it up / refactor as you like.
Oooooooooooohhh... that is a ListViewItem. The GridView items are the column headers. What I did for that was have a "main" ListViewItem style and use a trigger that points to the ListView.View and if its x:Null, I assume its the normal view and set the template to my normal view template, otherwise set it to my GridView template. I do the same thing for having a themed and non themed version. So I actually have 4 templates.
I'm trying to make custom buttons for my application but it's not going very well.
I have the following XAML just for testing purposes:
<Style x:Key="DefBtn" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Padding="4,2"
BorderBrush="DarkGray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<Grid >
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" Name="content"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Yellow" />
<Setter Property="Foreground" Value="#FF4788c8" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
-
<Button x:Name="btnCancelTimer" Content="{Binding [LangResources.timerDetail4], FallbackValue=Cancel Timer, Mode=OneWay, Source={StaticResource localisation}}" Margin="231,0,231,32.04" VerticalAlignment="Bottom" IsCancel="True" FontSize="13.333" Click="BtnCancelTimerClick" Cursor="Hand" Foreground="#FF666666" Background="White" FontFamily="Arial" FontWeight="Bold" Width="115" Height="24" Style="{DynamicResource DefBtn}" />
I'm trying to achieve a button styling exactly like this, also including mouseover and pressed stylings on the button.
Can anyone help/guide me on how I could achieve this?
Thanks
Try using this style
<Style x:Key="DefBtn" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FFF5F5F5"/>
<Setter Property="BorderBrush" Value="#FFDCDCDC"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="#FF666666"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="8,7"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="1"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<!--TODO: Set the right colors-->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Yellow" />
<Setter Property="Foreground" Value="#FF4788c8" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<!--Some setters here-->
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I don't have too keen of an eye for fonts, but Arial seems to be very close. KaXaml shows this style as follows:
Also, you need to check the setters for the MouseOver, Pressed and Disabled (IsEnabled=false) triggers\states.