I want to change the style of a theme an inherited style (inherited through based on). Have any idea? This is basically to define multiple styles for multi-series charts in wpf toolkit. Code looks as follows:
<Style x:Key="A" TargetType="DVC:ColumnDataPoint">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DVC:ColumnDataPoint">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" x:Name="Root">
<Grid Background="{TemplateBinding Background}" Name="columngrid">
<Grid.Resources>
<Style x:Key="aquaboarder" TargetType="Border">
<Style.Resources>
<LinearGradientBrush x:Key="BackBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#B211B9D8" Offset="0.1" />
<GradientStop Color="#FF0F56C7" Offset="0.9" />
</LinearGradientBrush>
</Style.Resources>
<Setter Property="Background" Value="{StaticResource BackBrush}"/>
</Style>
</Grid.Resources>
<Border Name="columnBorder" BorderBrush="Transparent" BorderThickness="1" CornerRadius="20,20,0,0" Style="{StaticResource aquaboarder}">
</Border>
</Grid>
<ToolTipService.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}" />
</ToolTipService.ToolTip>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the inherited style goes as follows:
<Style x:Key="B" BasedOn="{StaticResource A}" TargetType="DVC:ColumnDataPoint">
<Style.Resources>
<LinearGradientBrush x:Key="BackBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#B24DE509" Offset="0.1" />
<GradientStop Color="#FF238910" Offset="0.9" />
</LinearGradientBrush>
</Style.Resources>
</Style>
I want to set the columngrid in "style A" to use the backbrush defined in "style B". I do not like to do more stuff in style B as I will have many of inherited styles be defined just changing this style afterwards.
You are wasting the perfectly useful Background property that is already available and trying to create a new one that serves the same purpose. Since you are overriding the control template, just use the Background for the purpose that charting intended. Instead of setting it to transparent in your style, let your derived style set or override Background and then use {TemplateBinding Background} in the control template where are you current using {StaticResource Backbrush}. Your other use of {TemplateBinding Background} on the Grid element you can remove since it seems clear that your intention is that the grid background will be transparent.
Related
I'm using Prism for UI composition and would need a way to switch the active view by a RadioButton. I want a group of RadioButtons that would change the desired view when checked. I thought the TabControl would be perfect for this. I thought I could just use a style to change the template of the TabItem to a RadioButton, but it is not switching tabs with the RadioButton is selected. Here's the template I have for the TabItem
<ControlTemplate TargetType="{x:Type TabItem}">
<RadioButton IsChecked="{TemplateBinding IsSelected}"
Content="{TemplateBinding Header}" />
</ControlTemplate>
I thought that should make the tab selected when the RadioButton is checked, but that doesn't appear to happen. What am I doing wrong or is there another way to achieve the same result?
Also is there a way to make the first view of the TabControl active? I tried SelectedIndex="0" on the tab control, but that doesn't seem to set the IActiveAware.IsActive on the view.
Here is the exact code that I'm using for styling the TabControl and TabItem
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource mainRegionControlForegroundBrush}"></Setter>
<Setter Property="Header" Value="{Binding Content.DataContext.Title, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<RadioButton IsChecked="{TemplateBinding IsSelected}" Content="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Margin}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabControl}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local" ClipToBounds="True" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel IsItemsHost="True" Orientation="Horizontal" Margin="10,0"/>
<ContentPresenter Grid.Row="1" Name="PART_SelectedContentHost" Content="{TemplateBinding TabControl.SelectedContent}" ContentSource="SelectedContent" ContentTemplate="{TemplateBinding TabControl.SelectedContentTemplate}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I figured it out. TemplateBinding wasn't updating the parent property, so IsSelected was never set on the TabItem. I changed the binding to
IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
and it worked.
You simply need to define a new ControlTemplate for the RadioButton that uses a Border element:
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<ControlTemplate x:Key="TabTemplate" TargetType="{x:Type RadioButton}">
<Border BorderBrush="Black" Background="{TemplateBinding Background}"
BorderThickness="1,1,1,0" CornerRadius="5,5,0,0" Padding="5">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Template" Value="{StaticResource TabTemplate}" />
<Setter Property="Height" Value="26" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<RadioButton Content="Tab 1" />
<RadioButton Content="Tab 2" />
<RadioButton Content="Tab 3" />
</StackPanel>
I also added a basic Trigger so that you can see how to Style the selected item differently from the other tabs.
UPDATE >>>
Sorry, I clearly didn't read your question properly. To do it the other way around, it's a lot more work and unfortunately, you are going to have to do your bit because there is just too much code. So to start with, your example code didn't work because you were trying to define a new ControlTemplate for the TabControl, whereas you actually just need to define one for the TabItem.
The first step to do this is to actually define a new ControlTemplate for the whole TabControl which includes the ControlTemplate for the TabItem. Your example didn't work because you failed to replicate a lot of parts of the default ControlTemplate, so we need to do that. How? Well we can find the default ControlTemplate in the TabControl Styles and Templates page on MSDN.
So after looking at that, you'll understand why I can't put all that code here. At first, you basically need to use that exact XAML to reproduce the default ControlTemplate... when it is all working as normal, then you can start to tweak it to your requirements. If you look down the linked page, you'll see this:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
...
This is where the default ControlTemplate for the TabItem starts. Looking further down, underneath the VisualStateManager.VisualStateGroups, you should see this:
<Border x:Name="Border"
Margin="0,0,-4,0"
BorderThickness="1,1,1,1"
CornerRadius="2,12,0,0">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="0.0" />
<GradientStop Color="{DynamicResource ControlMediumColor}"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"
RecognizesAccessKey="True" />
</Border>
This is what defines what a TabItem should look like and is where you need to add your RadioButton (instead of this Border and it's contents). You'll probably also need to remove or adjust anything that references the old controls, eg. in the VisualStateManager.VisualStateGroups section.
I am using WPF datagrid. Using the following style I am applying checkbox to one of the columheader.
<Style x:Key="TestDataColumnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<CheckBox x:Name="chkbxCheckAll" VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding Path=CheckAll, Mode=TwoWay, ElementName=TestDataScreen}" Click="chkbxCheckAll_Click">
</CheckBox>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Control.Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="1" Color="#FFC2E3F6" />
<GradientStop Offset="0.53" Color="#FFF1FBFD" />
<GradientStop Color="#FFF2FAFD" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Control.BorderBrush" Value="#FFDADADA" />
<Setter Property="Control.BorderThickness" Value="1,0,1,1" />
<Setter Property="Control.Height" Value="26" />
<Setter Property="Control.HorizontalContentAlignment" Value="Center"/>
</Style>
The problem I am facing is, I can see the checkbox in columnheader but columnheader background color is not changed.
Try adding a border around the checkbox like this
<Border Background="{TemplateBinding Background}">
<CheckBox x:Name="chkbxCheckAll" VerticalAlignment="Center"
HorizontalAlignment="Center"
IsChecked="{Binding Path=CheckAll, Mode=TwoWay, ElementName=TestDataScreen}"
Click="chkbxCheckAll_Click">
</CheckBox>
</Border>
Edit:
If you make the background black and set the background of the CheckBox to TemplateBinding Background you will notice that a littlebit of the checkbox is getting black. This has to do with the build-in style of the CheckBox.
Just a guess, maybe Background was originally bounded to something in the default Template which you override.
Maybe you can try fixing that by adding a TemplateBinding for Background on the CheckBox:
<CheckBox x:Name="chkbxCheckAll" ... Background="{TemplateBinding Background}">
By the way, this is untested.
Here is my XAML for a TabItem. I want to be able to set the Color of a single gradient stop in a trigger. I know that I can re-define the gradient completely in the trigger's setter, but I want to access a specific property on the background so I can animate it in the future.
I have tried every variation of everything in the trigger's setter and googled for a long time - but I still can't get it to compile. I have also tried class.property syntax, but still nothing. The current error this code raises is:
"Type 'Background.GradientStops[0]' was not found."
I am pretty sure I know what is going on here - and perhaps what I want is impossible. But there has to be a way to animate a control's gradient in a control template...
Can anyone help me?
thanks
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<TextBlock Padding="6 2 6 2" Name="TheHeader">
<TextBlock.Background>
<LinearGradientBrush StartPoint="0, 0" EndPoint="0, 1">
<GradientStop Offset="0" Color="#f4fafd" />
<GradientStop Offset="1" Color="#ceedfa" />
</LinearGradientBrush>
</TextBlock.Background>
<ContentPresenter ContentSource="Header" Margin="0" />
</TextBlock>
<ControlTemplate.Triggers >
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="TheHeader" Property="Background.GradientStops[0].Color" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can animate it, like in the example here.
You also could use a slight hack to set it, though I always prefer creating multiple brushes as resources and swapping them or re-creating a brush in the as you mentioned.
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<TextBlock Padding="6 2 6 2"
Name="TheHeader" Tag="#f4fafd">
<TextBlock.Background>
<LinearGradientBrush StartPoint="0, 0"
EndPoint="0, 1">
<GradientStop Offset="0"
Color="{Binding ElementName=TheHeader, Path=Tag}"/>
<GradientStop Offset="1"
Color="#ceedfa" />
</LinearGradientBrush>
</TextBlock.Background>
<ContentPresenter ContentSource="Header"
Margin="0" />
</TextBlock>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter TargetName="TheHeader"
Property="Tag"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So the thing is that I have a main ControlTemplate which defines the most basic stuff for the new button look we're designing. But I want to do 3 other control templates for this button so we can set different colors in those; but I don't want to copy paste the main ControlTemplate and change the color there, instead I want to "inherit" from that (like with the BasedOn property in Style) and change the color in the inherited ControlTemplate.
Is this possible?
Thanks!
Found the solution. You don't extend ControlTemplates, instead you define all the basic behavior you want, and then you let either a style or the control itself modify it. Take the example below for instance. The ControlTemplate sets the OpacityMask and the round corners for my rectangle, the Styles sets the color of the background for each button (with help of a TemplateBinding), and there's my solution:
<Window.Resources>
<ControlTemplate x:Key="BaseMainButtonTemplate" TargetType="{x:Type Button}">
<Grid TextBlock.Foreground="White" TextBlock.FontFamily="Calibri">
<Rectangle Stroke="#FFE8E6E6" x:Name="rectangle" RadiusX="14.5" RadiusY="14.5" Fill="{TemplateBinding Property=Background}"> <!-- This TemplateBinding takes the color set by the style and applies it to the rectangle. Doing it this way, allows the style to modify the background color -->
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0,1" SpreadMethod="Reflect">
<GradientStop Offset="0" Color="Transparent"></GradientStop>
<GradientStop Offset="1" Color="Gray"></GradientStop>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<!-- OpacityMask when it's Focused, Defaulted and Mouse is over -->
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="OpacityMask" TargetName="rectangle">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" SpreadMethod="Repeat">
<GradientStop Offset="1" Color="Transparent"></GradientStop>
<GradientStop Offset="0" Color="Gray"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<!-- OpacityMask when it's pressed -->
<Trigger Property="IsPressed" Value="True">
<Setter Property="Stroke" TargetName="rectangle">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF223472" Offset="0"/>
<GradientStop Color="#FFF2F0F0" Offset="0.911"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="StrokeThickness" TargetName="rectangle" Value="3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="BlueButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Blue" />
<Setter Property="Template" Value="{StaticResource BaseMainButtonTemplate}">
</Setter>
</Style>
<Style x:Key="RedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Red" />
<Setter Property="Template" Value="{StaticResource BaseMainButtonTemplate}">
</Setter>
</Style>
<Style x:Key="GreenButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green" />
<Setter Property="Template" Value="{StaticResource BaseMainButtonTemplate}">
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel>
<Button Style="{StaticResource BlueButtonStyle}" Height="30" Content="Test">
</Button>
<Button Style="{StaticResource RedButtonStyle}" Height="30" Content="Test">
</Button>
<Button Style="{StaticResource GreenButtonStyle}" Height="30" Content="Test">
</Button>
</StackPanel>
</Grid>
Alternately you can define a "DynamicResource" reference to any dependency property in your Control Template and have it go resolve it's value given the presence of available resources.
For example, you can set Background="{DynamicResource SomeBrushColorVariable}"
Then SomeBrushColorVariable can change given different ResourceDictionaries that are merged into your App.xaml file or even set by the user given some user preferences display setting or color scheme.
In WPF, we are creating custom controls that inherit from button with completely drawn-from-scratch xaml graphics. We have a border around the entire button xaml and we'd like to use that as the location for updating the background when MouseOver=True in a trigger. What we need to know is how do we update the background of the border in this button with a gradient when the mouse hovers over it?
In your ControlTemplate, give the Border a Name and you can then reference that part of its visual tree in the triggers. Here's a very brief example of restyling a normal Button:
<Style
TargetType="{x:Type Button}">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="customBorder"
CornerRadius="5"
BorderThickness="1"
BorderBrush="Black"
Background="{StaticResource normalButtonBG}">
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="True">
<Setter
TargetName="customBorder"
Property="Background"
Value="{StaticResource hoverButtonBG}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If that doesn't help, we'll need to know more, probably seeing your own XAML. Your description doesn't make it very clear to me what your actual visual tree is.
You would want to add a trigger like this...
Make a style like this:
<Style x:Key="ButtonTemplate"
TargetType="{x:Type Button}">
<Setter Property="Foreground"
Value="{StaticResource ButtonForeground}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type Button}">
<Grid
SnapsToDevicePixels="True"
Margin="0,0,0,0">
<Border Height="20"
x:Name="ButtonBorder"
BorderBrush="{DynamicResource BlackBorderBrush}">
<TextBlock x:Name="button"
TextWrapping="Wrap"
Text="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
SnapsToDevicePixels="True"
Foreground="#FFFFFFFF"
Margin="6,0,0,0"
VerticalAlignment="Center"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!-- Disabled -->
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="ButtonBorder"
Property="Background"
Value="{DynamicResource ButtonBackgroundMouseOver}" />
<Setter TargetName="ButtonBorder"
Property="BorderBrush"
Value="{DynamicResource ButtonBorderMouseOver}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then add some resources for the gradients, like this:
<LinearGradientBrush x:Key="ButtonBackgroundMouseOver"
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FF000000"
Offset="0.432"/>
<GradientStop Color="#FF808080"
Offset="0.9"/>
<GradientStop Color="#FF848484"
Offset="0.044"/>
<GradientStop Color="#FF787878"
Offset="0.308"/>
<GradientStop Color="#FF212121"
Offset="0.676"/>
</LinearGradientBrush>
Please let me know if you need more help with this.