I've been looking inside templates but can't find anything.
example
My XAML so far:
<TabControl HorizontalAlignment="Left" Height="285" BorderThickness="0" Margin="10,56,0,0" VerticalAlignment="Top" Width="495">
<TabItem Header="Main" Foreground="#38acfc" BorderThickness="0" Background="#0c142c" FontFamily="Myriad Pro Cond" FontSize="14" Style="{DynamicResource CustomTabControl}">
<Grid Background="#0c142c"/>
</TabItem>
</TabControl>
Use this ControlTemplate :
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabPanel
Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border
Name="Border"
Grid.Row="1"
Background="White"
BorderBrush="Transparent"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="0"
ContentSource="SelectedContent" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="Gray" />
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I have a Style for a Slider that makes it look like this (without the red circle):
The problem is, that the Thumb is not overlapping the RepeatButton and therefore I see those white edges (red circle). If I have no CornerRadius on the right side of the RepeatButton the effect is much smaller but still present because the Thumb is a circle.
How can I prevent that?
Heres the Code:
<Style x:Key="SliderButtonStyleDec" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="{StaticResource ControlHighlightBackgroundBrush}" CornerRadius="4" Height="10"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<StackPanel>
<Ellipse Height="30" Width="30" Fill="{StaticResource ControlHighlightBackgroundBrush}"></Ellipse>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="TrackBackground" Margin="0" CornerRadius="4" Height="10" Grid.Row="1" Background="White">
</Border>
<Track Grid.Row="1" x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyleDec}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyleInc}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style TargetType="{x:Type Slider}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinWidth" Value="104" />
<Setter Property="MinHeight" Value="21" />
<Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="MinWidth" Value="21" />
<Setter Property="MinHeight" Value="104" />
<Setter Property="Template" Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
You can work with a negative margin and move the thumb to the end:
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="TrackBackground" Margin="0" CornerRadius="4" Height="10" Grid.Row="1" Background="White">
</Border>
<Track Grid.Row="1" x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyleDec}" Command="Slider.DecreaseLarge" Margin="0,0,-10,0"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyleInc}" Command="Slider.IncreaseLarge" Margin="-10,0,0,0"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
My Groupbox template is defined as so
<Style x:Key="{x:Type GroupBox}" TargetType="{x:Type GroupBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Border BorderThickness="1" BorderBrush="SomeColour"
Background="SomeColour"
CornerRadius="4">
<Grid SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" ContentSource="Header"
Margin="2"/>
<ContentPresenter Grid.Row="1"
Margin="{TemplateBinding Padding}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How do I make it so that if the Header is set to a simple simple string, e.g
<GroupBox Header="The header!" />
The text is bold and with some default colour?
I tried the following, but it only works for the weight, not the colour.
<ContentPresenter ContentSource="Header" TextBlock.Foreground="Red"
TextBlock.FontWeight="Bold"/>
Edit : here is the textblock style
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="{StaticResource LabelForegroundBrush}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Margin" Value="1" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledLabelForegroundBrush}" />
</Trigger>
</Style.Triggers>
</Style>
Edit 2 : If I place the following in <Window.Resources> it seems to work, yet if I place them in <Application.Resources>, .. it fails???
<XXX.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Green" />
</Style>
<Style x:Key="{x:Type GroupBox}" TargetType="{x:Type GroupBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" ContentSource="Header" TextElement.Foreground="Red" />
<ContentPresenter Grid.Row="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</XXX.Resources>
Usage :
<GroupBox Header="Header">
<Button Content="Content" />
</GroupBox>
Try this
<Style x:Key="{x:Type GroupBox}" TargetType="{x:Type GroupBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Border BorderThickness="1" BorderBrush="SomeColour"
Background="SomeColour"
CornerRadius="4">
<Grid SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Foreground="Red" FontWeight="Bold" Margin="2">
<ContentPresenter ContentSource="Header"/>
</TextBlock>
<ContentPresenter Grid.Row="1" Margin="{TemplateBinding Padding}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need attached properties TextElement.FontWeight and TextElement.Foreground instead.
<ContentPresenter ContentSource="Header"
Margin="2"
TextElement.FontWeight="Bold"
TextElement.Foreground="Red"/>
In case style is under Application resources, it
ignores the foreground set on ContentPresenter. If i have it under Window resources, it works
fine.
However, you can override Style for TextBlock and set only Foreground property. Also you can inherit all other properties from Style declared under App resources using BasedOn. Place that style under resource of ContentPresenter so that it gets overridden only for your ContentPresenter.
This will work:
<ContentPresenter Grid.Row="0" ContentSource="Header"
Margin="2" TextBlock.FontWeight="Bold">
<ContentPresenter.Resources>
<Style TargetType="TextBlock"
BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="Foreground" Value="Red"/>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
I have 2 elements - window and button.
I want to bind the Window's BorderBrush Value to the Button's isPressed Background Value.
Both elements has custom style. here are the styles:
Button Style:
<Style x:Key="TitleBarButton" TargetType="Button">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="12,8.5"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="FontFamily" Value="Marlett"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<Grid>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.FontSize="{TemplateBinding FontSize}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#EFEFF2" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#007ACC"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Window Style:
<Style TargetType="{x:Type local:MetroWindow}">
<Setter Property="Background" Value="White"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="ResizeMode" Value="CanResize"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="BorderBrush" Value="#007ACC"/>
<Setter Property="BorderThickness" Value="0.5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MetroWindow}">
<Grid Name="BaseGrid" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="4" />
<RowDefinition Height="*" />
<RowDefinition Height="4" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4" />
</Grid.ColumnDefinitions>
<DockPanel LastChildFill="true" Grid.RowSpan="3" Grid.ColumnSpan="3">
<Border Name="TopBorder" DockPanel.Dock="Top" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<Border Name="RightBorder" DockPanel.Dock="Right" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<Border Name="BottomBorder" DockPanel.Dock="Bottom" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<Border Name="LeftBorder" DockPanel.Dock="Left" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<DockPanel LastChildFill="True">
<DockPanel LastChildFill="True" DockPanel.Dock="Top">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
<Button x:Name="Minimize" ToolTip="Minimize" Content="0" Style="{StaticResource TitleBarButton}"/>
<Button x:Name="Restore" ToolTip="Restore" Content="2" Style="{StaticResource TitleBarButton}" Visibility="Collapsed"/>
<Button x:Name="Maximize" ToolTip="Maximize" Content="1" Style="{StaticResource TitleBarButton}"/>
<Button x:Name="Close" ToolTip="Close" Content="r" Style="{StaticResource TitleBarButton}"/>
</StackPanel>
<DockPanel x:Name="TitleBar">
<Border x:Name="IconBorder" Padding="5,0,0,0">
<Image Width="16" Height="16" Source="{Binding Icon, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased"/>
</Border>
<Label x:Name="Title" VerticalAlignment="Center" FontSize="14" Content="{Binding Title, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"/>
</DockPanel>
</DockPanel>
<Grid>
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
</Grid>
</DockPanel>
</DockPanel>
<Rectangle x:Name="TopLeftRectangle" Fill="Transparent" />
<Rectangle x:Name="TopRectangle" Fill="Transparent" Grid.Column="1" />
<Rectangle x:Name="TopRightRectangle" Fill="Transparent" Grid.Column="2" />
<Rectangle Name="RightRectangle" Fill="Transparent" Grid.Row="1" Grid.Column="2" />
<Rectangle Name="BottomRightRectangle" Fill="Transparent" Grid.Row="2" Grid.Column="2" />
<Rectangle Name="BottomRectangle" Fill="Transparent" Grid.Row="2" Grid.Column="1" />
<Rectangle Name="BottomLeftRectangle" Fill="Transparent" Grid.Row="2" />
<Rectangle Name="LeftRectangle" Fill="Transparent" Grid.Row="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In your Button ControlTemplate.Trigger for IsPressed you can bind the Background in
Setter like:
<Setter Property="Background" Value="{Binding BorderBrush, RelativeSource= {RelativeSource AncestorType={x:Type local:MetroWindow}}}"/>
In your Button ControlTemplate.Trigger for IsPressed you can bind the Background in Setter like:
Setter Property="Background" Value="{Binding Path=BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"
<Border Background="#FF260F54">
<TabControl Name="MyTabCtrl" SelectionChanged="MyTabCtrl_SelectionChanged" >
<TabItem Name="TItem01" Header="01">
<TextBlock>TItem01</TextBlock>
</TabItem>
<TabItem Name="TItem02" Header="02">
<TextBlock>TItem02</TextBlock>
</TabItem>
</TabControl>
</Border>
I want to make TItem01 move to the left 200 pixels, then show TItem02.
What should I do? Please help me. Thank you very much!
Don't know if this is the simplest way, but I would modify the default TabControl Style:
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabPanel
Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="200,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border
Name="Border"
Grid.Row="1"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Notice the Margin property of the TabPanel element in the ContolTemplate? That margin determines where the tabs start. By default it's 0,0,4,-1 and I modified it to 200,0,4,-1 to match your requirement.
If you are wondering how I produced the style, there are a couple of ways. The easiest would be using Expression Blend. It has an option to "break" your control and expose all it's default parts and styles. Another way is just search MSDN for ControlTemplates because they are public. (I used the second method)
I am creating a button style. Paste this into a window to see the idea:
<Style x:Key="SelectionButton3"
TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="TheBorder"
BorderThickness="0,1.5,1.5,1.5"
CornerRadius="3"
Background="SteelBlue"
Height="35"
Grid.Column="1"
Grid.Row="0"
Margin="-31"
BorderBrush="DarkSlateBlue">
<Border.BitmapEffect>
<DropShadowBitmapEffect x:Name="BorderShadow"
ShadowDepth="0"/>
</Border.BitmapEffect>
</Border>
<Rectangle Fill="SteelBlue"
Stroke="DarkSlateBlue"
Grid.Row="0"
Grid.Column="0">
<Rectangle.LayoutTransform>
<RotateTransform Angle="-45" />
</Rectangle.LayoutTransform>
<Rectangle.BitmapEffect>
<DropShadowBitmapEffect ShadowDepth="5"/>
</Rectangle.BitmapEffect>
</Rectangle>
<ContentPresenter x:Name="ContentArea"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground"
Value="LightGray" />
<Setter Property="FontFamily"
Value="Segoe UI" />
</Style>
<Button Click="Button_Click"
Style="{StaticResource SelectionButton3}"
Width="185">
</Button>
What I would like to have happen is for the Borders drop shadow to appear when the mouse is over either the Border or the Rectangle. I know I need a trigger, but I'm not really sure where & how to do it.
Can someone point me in the right direction?
Thanks
<Style x:Key="SelectionButton3"
TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="TheBorder"
BorderThickness="0,1.5,1.5,1.5"
CornerRadius="3"
Background="SteelBlue"
Height="35"
Grid.Column="1"
Grid.Row="0"
Margin="-31"
BorderBrush="DarkSlateBlue">
</Border>
<Rectangle Name="rect" Fill="SteelBlue"
Stroke="DarkSlateBlue"
Grid.Row="0"
Grid.Column="0">
<Rectangle.LayoutTransform>
<RotateTransform Angle="-45" />
</Rectangle.LayoutTransform>
</Rectangle>
<ContentPresenter x:Name="ContentArea"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="TheBorder" Property="BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect ShadowDepth="0" />
</Setter.Value>
</Setter>
<Setter TargetName="rect" Property="BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect ShadowDepth="5"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground"
Value="LightGray" />
<Setter Property="FontFamily"
Value="Segoe UI" />
</Style>
Note that unless you're using .NET 3.0 or 3.5 pre SP1, you should use Effect instead of BitmapEffect. The BitmapEffect property has been deprecated in 3.5 SP1