I want to underline the TabItem Header Title when Mousehover on header , and remove the Underline once it is selected.
I have tried below code:
<Style x:Key="N3EntityNavigationItemStyle" TargetType="{x:Type Custom11:TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" BorderThickness="0,0,1,0" BorderBrush="White" Padding="5,2">
<ContentPresenter x:Name="CP" ContentSource="Header">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="TextElement.Foreground" TargetName="CP" Value="Black"/>
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" TextDecorations="Underline"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But the tabitem header still remain underline after selecting the tab.
Related
I want to add border to radiobutton with text on isChecked
I tried Style.Trigger but it didn't seem to have action
Also tried via ControlTemplate.Trigger but referencing to both grid and text box says Parameter is not recognized
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style BasedOn="{StaticResource {x:Type ToggleButton}}"
TargetType="{x:Type RadioButton}"
x:Key="MenuButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
x:Name="GridMain">
<TextBlock Text="{TemplateBinding Property=Content}"
x:Name="ButtonText"
VerticalAlignment="Center"
Margin="20,0,0,0">
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ButtonText" Property="Margin" Value="30,0,0,0"></Setter>
<!-- <Setter TargetName="ButtonText" Property="BorderThickness" Value="5"></Setter> -->
<!-- <Setter TargetName="GridMain" Property="BorderThickness" Value="5"></Setter> -->
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="GridMain" Property="Background" Value="#424549"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"></Setter>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderThickness" Value="5"></Setter>
<Setter Property="BorderBrush" Value="#7289da"></Setter>
</Trigger>
</Style.Triggers>
</Style>
The TextBlock doesn't have a border, so it's impossible to set a value for the border either.
It can be solved in two ways.
Use instead of TextBlock element TextBox in read-only mode.
<ControlTemplate TargetType="RadioButton">
<Grid VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
x:Name="GridMain">
<TextBox Text="{TemplateBinding Content}"
x:Name="ButtonText"
VerticalAlignment="Center"
Margin="20,0,0,0"
IsReadOnly="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ButtonText" Property="Margin" Value="30,0,0,0"></Setter>
<Setter TargetName="ButtonText" Property="BorderThickness" Value="5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="GridMain" Property="Background" Value="#424549"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Since you have only one element in the panel, you can use Border instead.
<ControlTemplate TargetType="RadioButton">
<Border VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
x:Name="GridMain">
<TextBlock Text="{TemplateBinding Property=Content}"
x:Name="ButtonText"
VerticalAlignment="Center"
Margin="20,0,0,0">
</TextBlock>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ButtonText" Property="Margin" Value="30,0,0,0"></Setter>
<Setter TargetName="GridMain" Property="BorderThickness" Value="5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="GridMain" Property="Background" Value="#424549"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I have resource dictionary for my radio button which adds textbox to it. I want to add trigger which adds left margin to this textbox but I don't know how to reference it
I marked place where I want to add reference
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style BasedOn="{StaticResource {x:Type ToggleButton}}"
TargetType="{x:Type RadioButton}"
x:Key="MenuButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}">
<TextBlock Text="{TemplateBinding Property=Content}"
VerticalAlignment="Center"
Margin="20,0,0,0">
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Margin" Value="30,0,0,0"></Setter> <!-- Reference TextBlock here -->
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#424549"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
You need to set triggers not in Style, but in ControlTemplate. Then you can refer to template elements by name:
<ControlTemplate TargetType="RadioButton">
<Grid x:Name="PART_Main" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}">
<TextBlock x:Name="PART_TBlock"
Text="{TemplateBinding Property=Content}"
VerticalAlignment="Center"
Margin="20,0,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="PART_TBlock" Property="Margin" Value="30,0,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Main" Property="Background" Value="#424549"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I am trying to create a style for a TabControl to achieve 2 goals:
Display the selected TabItem with a different background color and in bold.
Format the tab header text, bound to a date in the view model, to hours and minutes like "15:45".
I almost succeeded but the header text is also displaying the date part.
Besides it is displaying 03:45 instead of 15:45.
see screenshot here
Here is the XAML code I am using:
<TabControl ItemsSource="{Binding MC}" >
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="#01535F" />
<Setter Property="Foreground" Value="Azure" />
<Setter Property="FontSize" Value="16" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" Margin="1,1">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
/>
<!--<HeaderedContentControl Header="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}" />-->
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Panel" Property="Background" Value="#003F44" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#01535F" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<HeaderedContentControl Header="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
</TabControl>
Thanks in advance for any help.
I think this is what you're looking for:
<TabControl ItemsSource="{Binding MC}">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="#01535F" />
<Setter Property="Foreground" Value="Azure" />
<Setter Property="FontSize" Value="16" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" Margin="1,1">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Panel" Property="Background" Value="#003F44" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#01535F" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}"></TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
The ItemTemplate is for the header area, the ContentTemplate is for what is showing in the content area. That ContentPresenter in the ContentTemplate will instantiate the controls from the ItemTemplate.
This is my ToggleButton:
<ToggleButton Width="100" Height="30" Margin="344,262,530,345" BorderThickness="2" Background="Transparent"
BorderBrush="#38abcf" FontFamily="Resources/#Buxton Sketch" Foreground="Gainsboro" FontSize="14">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content" Value="OFF"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="ON"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
Currently on activate state it's look like that:
And the Background color not changed although i set new property.
Update
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content" Value="Loops OFF"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Width="100" Height="30" BorderThickness="2" Background="Transparent" BorderBrush="#38abcf">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="Loops ON"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
Override default template
<ToggleButton>
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content" Value="OFF"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Name="Border" Width="100" Height="30" BorderThickness="2" Background="Transparent"
BorderBrush="#38abcf">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Red" TargetName="Border" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="ON"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
I have a style for button as per below code.
<Style TargetType="Button" x:Key="TransparentButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" x:Name="borderTemplate"
Background="Transparent">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="borderTemplate"
Property="Border.BorderBrush" Value="Gray" />
<Setter TargetName="borderTemplate"
Property="Border.BorderThickness" Value="1" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="borderTemplate"
Property="Border.BorderBrush" Value="Lime" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I need to set the background of button
1.To gray as soon as “MouseUp“ event occurred.
2.And set it to Default(say white)as soon as Focus Of Button being changed or say Focus Being lost.
Is there any way to solve this using Trigger or EventTrigger??.
See One example for above code with image
Button with Above style.
<Button Background="Black" Style="{StaticResource TransparentButton}"
Content="0123456789" Height="15" HorizontalAlignment="Left"
Name="button2" VerticalAlignment="Top" Margin="70,17,0,0" />
Button will look as per below image after above style being applied.
This can be done by using RadioButton instead of Button
just have a look at this
<Style x:Key="RadioButtonStyle1" TargetType="{x:Type RadioButton}">
<Setter Property="Background" Value="#F4F4F4"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border HorizontalAlignment="Center" x:Name="borderTemplate" Background="Transparent" VerticalAlignment="Center">
<ContentPresenter x:Name="contentPresenter" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="borderTemplate" Value="#FFE4E4E4"/>
<Setter Property="HorizontalAlignment" TargetName="contentPresenter" Value="Center"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" TargetName="borderTemplate" Value="#FFA1A1A1"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Grid x:Name="LayoutRoot">
<StackPanel/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="116,86.04,0,0" Style="{StaticResource RadioButtonStyle1}"/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="116,106,0,0" Style="{StaticResource RadioButtonStyle1}"/>
</Grid>