I'm setting in a WPF application the style of a button with this:
<Style TargetType="{x:Type Button}">
<Setter Property="ToolTipService.InitialShowDelay" Value="0"/>
<Setter Property="Height" Value="22" />
<Setter Property="Margin" Value="1" />
<Setter Property="Padding" Value="0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
Padding="{TemplateBinding Padding}"
BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="1 -1 1 0"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="{StaticResource NotSelectedButton}" />
<Setter Property="Foreground" Value="{StaticResource ActiveFg}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Selected}" />
<Setter Property="Foreground" Value="{StaticResource SelectedFg}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="{StaticResource NotSelectedButton}" />
<Setter Property="Foreground" Value="{StaticResource ActiveFg}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource NotSelectedButton}" />
<Setter Property="Foreground" Value="{StaticResource InactiveFg}" />
<!--<Setter Property="Foreground" Value="{StaticResource NotSelected}" />-->
</Trigger>
</Style.Triggers>
</Style>
However I want the TextBlock in the ContentPresenter to use a named TextBlock style defined as such:
<Style x:Key="ButtonText" TargetType="{x:Type TextBlock}">
<Setter Property="ToolTipService.InitialShowDelay" Value="0"/>
<Setter Property="Width" Value="auto" />
<Setter Property="MinWidth" Value="20" />
<Setter Property="TextAlignment" Value="Left" />
<Setter Property="Padding" Value="0 0 0 0" />
<Setter Property="Margin" Value="1 0 0 0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
To test this style, just a Button in a UserControl or Window suffices: <Button>, and the style definitions can go in a resource dictionary (of UserControl or Window).
How can I do this ?
Trivial Solution via Direct Assignment
You can set the style directly by assigning a TextBlock as Content of each Button.
<Button>
<TextBlock Text="Test" Style="{StaticResource ButtonText}"/>
</Button>
Support Text As Content Only
If you are sure that you only put strings as content into your button, you can assign a ContentTemplate that contains a TextBlock to the ContentPresenter. This will not work for other content types in the sense that it would not display them as usual, but just their type name in the TextBlock.
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="1 -1 1 0">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Style="{StaticResource ButtonText}" Text="{Binding}"/>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
Support All Content Types
If you want to support any content type as content of your button, you can define the data template from above in the ContentPresenter.Resources. Then, the ContentPresenter will only apply it, if the Content is a string. For all other content types it will work as usual.
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="1 -1 1 0">
<ContentPresenter.Resources>
<DataTemplate DataType="{x:Type system:String}">
<TextBlock Style="{StaticResource ButtonText}" Text="{Binding}"/>
</DataTemplate>
</ContentPresenter.Resources>
</ContentPresenter>
Related
I'm kinda new to WPF/XAML
I have this Button that holds a stack panel which is having an Image and a Textbox Control to it.
I have styled the button in a StaticResource
How can I achieve an image change on MouseOver?
I have accomplished changing the Background color, and the Foreground color (text) to change on mouseover, but I can't get the image change to work
This is my Button:
<Button Style="{StaticResource mainMenuHomeBtn}">
<StackPanel
Orientation="Horizontal"
HorizontalAlignment="Left">
<Image Name="hjemImage" Margin="5" Height="30" Source="/Images/fal-home-lg-alt.png"/>
<TextBlock Margin="10" VerticalAlignment="Center" Text="Hjem"/>
</StackPanel>
</Button>
And this is my Button Styling:
<Style x:Key="mainMenuHomeBtn" TargetType="{x:Type Button}">
<Setter Property="Width" Value="auto"/>
<Setter Property="Height" Value="auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Padding" Value="-2"/>
<Setter Property="Foreground" Value="#e3e3e3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="#cccccc" BorderThickness="0">
<ContentPresenter HorizontalAlignment="Left"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#696969"/>
<Setter Property="Background" Value="#d9d9d9"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#e3e3e3"/>
</Trigger>
</Style.Triggers>
</Style>
Your Style/ControlTemplate doesn't know anything about the StackPanel that happens to be in the element that is currently set as the Content of the Button element that the Style is currently applied to.
You could move the contents to the template and use a trigger so change the Source of the Image element in the template:
<Style x:Key="mainMenuHomeBtn" TargetType="{x:Type Button}">
<Setter Property="Width" Value="auto"/>
<Setter Property="Height" Value="auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Padding" Value="-2"/>
<Setter Property="Foreground" Value="#e3e3e3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="#cccccc" BorderThickness="0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="hjemImage" Margin="5" Height="30" Source="/Images/fal-home-lg-alt.png"/>
<TextBlock Margin="10" VerticalAlignment="Center" Text="Hjem"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="hjemImage" Property="Source" Value="pic.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#696969"/>
<Setter Property="Background" Value="#d9d9d9"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#e3e3e3"/>
</Trigger>
</Style.Triggers>
</Style>
Then there is no point of setting the Content property since there is no ContentPresenter in the Style:
<Button Style="{StaticResource mainMenuHomeBtn}" />
The other option is to keep your Style as-is and add a DataTrigger that binds to the IsMouseOver property of the Button to an element in the content:
<Button Style="{StaticResource mainMenuHomeBtn}">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left">
<Image Name="hjemImage" Margin="5" Height="30">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source" Value="/Images/fal-home-lg-alt.png" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}"
Value="True">
<Setter Property="Source" Value="pic.png" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Margin="10" VerticalAlignment="Center" Text="Hjem"/>
</StackPanel>
</Button>
I have a button that I need to change the background and foreground color of when the button is in focus. I have the background color change working, but cannot get the foreground color change (on the label) to work.
I want to do this in XAML only.
My Button:
<Button Style="{StaticResource ModButtonWhite}"
Name="btnConnect"
Height="30"
Click="btnConnect_Click"
Width="75"
Margin="0,0,15,0">
<Label Name ="btnConnectLabel" Content="Re-_Connect" />
</Button>
My Style:
<Style TargetType="Button"
x:Key="ModButtonWhite">
<Setter Property="Foreground"
Value="White" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
CornerRadius="5"
BorderThickness="1"
BorderBrush="White">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsFocused"
Value="True">
<Setter Property="Background"
Value="White" />
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Resources>
<Style TargetType="Label">
<Setter Property="Foreground"
Value="White" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="White" />
<Setter Property="Opacity"
Value=".4" />
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</Style.Triggers>
All you need to do is to bind the Label.Foreground to the Button.Foreground. No need of any additional styles defined in the Style.Resources dictionary. Just the plain style to override the Button.Template:
<Window>
<Window.Resources>
<Style TargetType="Button"
x:Key="ModButtonWhite">
<Setter Property="Foreground"
Value="White" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
CornerRadius="5"
BorderThickness="1"
BorderBrush="White">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsFocused"
Value="True">
<Setter Property="Background"
Value="White" />
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Button Style="{StaticResource ModButtonWhite}">
<Label Content="Click me!"
Foreground="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}" />
</Button>
</Window>
I have changed the styles of my Buttons in WPF. All that is working as intended, but is there a way to get the classic hotkey underscore that you display by pressing ALT to display? If I put an underscore in the Button text, it always displays it.
<Style TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource THFont}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#f00000" />
<Setter Property="Height" Value="20" />
<Setter Property="Margin" Value="10 0 10 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border x:Name="border" CornerRadius="10" BorderBrush="#f00000" BorderThickness="1" Background="#f00000">
<Grid>
<TextBlock Name="TextBlock" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Margin="10 0 10 0" Text="{TemplateBinding Button.Content}" />
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#BD0000" />
<Setter Property="BorderBrush" TargetName="border" Value="#BD0000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Your template should include a ContentPresenter:
<Style TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource THFont}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#f00000" />
<Setter Property="Height" Value="20" />
<Setter Property="Margin" Value="10 0 10 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border x:Name="border" CornerRadius="10" BorderBrush="#f00000" BorderThickness="1" Background="#f00000">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontSize="12" Margin="10 0 10 0"
Focusable="False" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#BD0000" />
<Setter Property="BorderBrush" TargetName="border" Value="#BD0000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
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.
I have designed a button within my WPF application, this button layout will be used throughout the application, however the colours will change. There are two parts of the button, the left side has an icon and a background color, then the right side has the text with a different background color.
How can I reference the left sides background color in the Triggers so that when the user mouse over the button it will change to that color?
Side 1: Name="buttonIcon"
Side 2: Name="buttonText"
<Style x:Key="ButtonIcoSmall" TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#FF22252b" />
<Setter Property="Padding" Value="8" />
<Setter Property="Margin" Value="6" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<WrapPanel>
<Border Grid.Column="0"
CornerRadius="5 0 0 5"
BorderThickness="0"
Background="#434953"
Name="buttonIcon">
<WrapPanel>
<ContentPresenter Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="{TemplateBinding Margin}" />
</WrapPanel>
</Border>
<Border Grid.Column="0"
CornerRadius="0 5 5 0"
BorderThickness="0"
Background="#FF22252b"
Name="buttonText" >
<TextBlock Text="{TemplateBinding Tag}"
FontSize="13"
Foreground="White"
Padding="{TemplateBinding Padding}" />
</Border>
</WrapPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="" TargetName="buttonText" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#757b8d" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</Style.Triggers>
</Style>
Hopefully I understand the issue correctly. If so, change your ControlTemplate.Triggers section to add a Setter for buttonIcon as follows:
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="" TargetName="buttonText" />
<Setter Property="Background" Value="Blue" TargetName="buttonIcon" />
</Trigger>
</ControlTemplate.Triggers>
Since you are handling IsMouseOVer for both parts of the button in the ControlTemplate, you may no longer need your Style.Triggers section unless it is providing useful background to the parent layers above the borders.