Is it possible to change a resource from another resource. I like to change the background of StartButtonRed if the mouse is over StartButtonMain.
<ImageBrush x:Key="RedBackgroundActive" ImageSource="/Images/start_red_active.png" Stretch="Fill"/>
<Style x:Key="StartButtonMain" TargetType="{x:Type local:SimpleButton}">
<Style.Resources>
<ImageBrush x:Key="MainBackground" ImageSource="/Images/start_main_normal.png" Stretch="Fill"/>
<ImageBrush x:Key="MainBackgroundActive" ImageSource="/Images/start_main_active.png" Stretch="Fill"/>
</Style.Resources>
<Style.Setters>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Background" Value="{StaticResource MainBackground}"/>
<Setter Property="Visibility" Value="Visible"/>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource MainBackgroundActive}"/>
// Change the background of StartButtonRed to RedBackgroundActive
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="StartButtonRed" TargetType="{x:Type local:SimpleButton}">
<Style.Resources>
<ImageBrush x:Key="RedBackground" ImageSource="/Images/start_red_normal.png" Stretch="Fill"/>
</Style.Resources>
<Style.Setters>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Background" Value="{StaticResource RedBackground}"/>
<Setter Property="Visibility" Value="Visible"/>
</Style.Setters>
</Style>
You can't do this. Because styles are resources and triggers can only target FrameworkElements from within their own Template or using a Binding to an other actual FrameworkElement, you can't bind to another resource.
You could solve this with UserControl Triggers.
Related
I have a custom 3 state Button that is supposed to cycle between 3 different states (colours) as it is clicked. However the click handler I've written doesn't have any effect on the background colour of the Border within the ControlTemplate.
I'm probably missing something very simple, but I'd really appreciate a fresh pair of eyes to spot what it may be.
The ControlTemplate and Button.Click handler are below:
<Style x:Key="FilterButtonStyle" TargetType="{x:Type local:FilterButton}"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="ButtonBackground" BorderThickness="0" Padding="0"
Margin="0" CornerRadius="6"
Background="{StaticResource blueShader}" >
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{StaticResource glowShadow}">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{StaticResource textBrush}"/>
<Setter Property="Margin" Value="4,4,0,4"></Setter>
<Setter Property="Padding" Value="4"></Setter>
<Setter Property="Height" Value="55"></Setter>
<Setter Property="Width" Value="55"></Setter>
<Setter Property="FontSize" Value="10"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="TextBlock.TextWrapping" Value="Wrap"></Setter>
<Setter Property="HasDisabledState" Value="True"></Setter>
<Setter Property="OnColour" Value="{StaticResource greenShader}"></Setter>
<Setter Property="OffColour" Value="{StaticResource blueShader}"></Setter>
<Setter Property="DisabledColour" Value="{StaticResource redShader}"></Setter>
</Style>
private void FilterButton_Click(object sender, RoutedEventArgs e)
{
if (!this.CanChangeState) { return; }
// Get child border element.
Border border = this.Template.LoadContent() as Border;
// Cycle through button states.
switch (this.ButtonState)
{
case ButtonStates.Off:
this.ButtonState = ButtonStates.On;
border.Background = this.OnColour;
break;
case ButtonStates.On:
if (this.HasDisabledState)
{
this.ButtonState = ButtonStates.Disabled;
border.Background = this.DisabledColour;
}
else
{
this.ButtonState = ButtonStates.Off;
border.Background = this.OffColour;
}
break;
case ButtonStates.Disabled:
this.ButtonState = ButtonStates.Off;
border.Background = this.OffColour;
break;
}
}
Never mind, I found that a better way of handling this was to use ControlTemplate triggers to change the Button colour based on the ButtonState property.
<Style x:Key="FilterButtonStyle" TargetType="{x:Type local:FilterButton}"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="ButtonBackground" BorderThickness="0" Padding="0" Margin="0" CornerRadius="6"
Background="{StaticResource blueShader}" >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{StaticResource glowShadow}">
</Setter>
</Trigger>
<Trigger Property="local:FilterButton.ButtonState" Value="On">
<Setter TargetName="ButtonBackground" Property="Background" Value="{StaticResource greenShader}"></Setter>
</Trigger>
<Trigger Property="local:FilterButton.ButtonState" Value="Off">
<Setter TargetName="ButtonBackground" Property="Background" Value="{StaticResource blueShader}"></Setter>
</Trigger>
<Trigger Property="local:FilterButton.ButtonState" Value="Disabled">
<Setter TargetName="ButtonBackground" Property="Background" Value="{StaticResource redShader}"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{StaticResource textBrush}"/>
<Setter Property="Margin" Value="4,4,0,4"></Setter>
<Setter Property="Padding" Value="4"></Setter>
<Setter Property="Height" Value="55"></Setter>
<Setter Property="Width" Value="55"></Setter>
<Setter Property="FontSize" Value="10"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="TextBlock.TextWrapping" Value="Wrap"></Setter>
<Setter Property="HasDisabledState" Value="True"></Setter>
</Style>
Inside of app.xaml I have datagrid style
and for each window that contains a datagrid, I added an event setter for the datagridrow.
however, when I run it, I can see the style, but when I try to trigger the event nothing happens. if I remove the style from app.xaml. the event works well.
why app.xaml style disable my eventsetter?
here's the datagrid inside the app.xaml:
<Style TargetType="DataGrid">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="GridLinesVisibility" Value="None"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="RowStyle">
<Setter.Value>
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Foreground" Value="White"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ColumnHeaderStyle">
<Setter.Value>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Margin" Value="5,0,0,0"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{ x:Type DataGridColumnHeader}">
<Border BorderThickness="2,2,2,0" CornerRadius="5,5,0,0">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" Value="{x:Null}">
<Setter Property="BorderBrush" Value="Transparent"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<ContentPresenter HorizontalAlignment="Center" Margin="5"></ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
here's the eventsetter inside each window that contains datagrid:
<Style TargetType="DataGridRow">
<EventSetter Event="MouseDoubleClick" Handler="EditItem"/>
</Style>
It seems, that the grid uses the RowStyle from it's property later, than it has been set in window's resources. It will work, if you clear your RowStyle property in grid. Put this to the window's resources:
<Style TargetType="DataGrid" BasedOn="{StaticResource {x:Type DataGrid}}">
<Setter Property="RowStyle" Value="{x:Null}"/>
</Style>
For you can use the style set in app.xaml, you have to move the RowStyle from property to global(in app.xaml):
<Style TargetType="DataGrid">
....
<Setter Property="RowStyle" Value="{x:Null}"/>
...
</Style>
<Style TargetType="DataGridRow" BasedOn="{StaticResource {x:Type DataGridRow}}">
<Setter Property="Background" Value="Green"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Foreground" Value="White"/>
</Style>
and in window's resources:
<Style TargetType="DataGridRow" BasedOn="{StaticResource {x:Type DataGridRow}}">
<EventSetter Event="MouseDoubleClick" Handler="PreviewMouseDown"/>
</Style>
I am trying to change the background color when button gets click/focused but there is not any change occurring.
<Style x:Key="btnInputForm" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="22"/>
<Setter Property="Background" Value="#2f772b"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="120"/>
<Setter Property="Height" Value="23"/>
<Setter Property="Button.RenderTransformOrigin" Value=".5,.5"/>
<Setter Property="TextElement.FontSize" Value="14" />
<Setter Property="TextElement.FontFamily" Value="Calibri" />
<Setter Property="Control.BorderBrush" Value="#085b09" />
<Setter Property="Control.BorderThickness" Value="1,1,1,1" />
<Setter Property="Margin" Value="3,10,3,3" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Yellow"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="Yellow"/>
</Trigger>
</Style.Triggers>
</Style>
And the button:
<Button Content="Click Me" Height="30" Width="100"></Button>
I want to create an application with multiple buttons. So I want to create a style in my application to define the buttons. Buttons should contain an image and that image should change when mousse is over.
I created resources for images :
<Image x:Key="Open-active" Source="Images/Open-active.png"/>
<Image x:Key="Open-over" Source="Images/Open-over.png"/>
<Image x:Key="Printer-active" Source="Images/Printer-active.png"/>
<Image x:Key="Printer-over" Source="Images/Printer-over.png"/>
I created a Style (but doesn't work with resource type Image):
<Style x:Key="ButtonMain" TargetType="Button"
BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Setter Property="Height" Value="{StaticResource MainButtonHeight}"/>
<Setter Property="Width" Value="{StaticResource MainButtonWidth}"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Foreground" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="???"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="???"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
How can a properly create my Style and how use it ?
I want to use it with something like this :
<Button Style="{StaticResource ButtonMain}"
ImageActive="{StaticResource Open-active}"
ImageOver="{StaticResource Open-over}"">
Thank you for help
You could use style inheritance to achieve what you're trying to do :
Your main style would be :
<Style x:Key="ButtonMain" TargetType="Button"
BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Setter Property="Height" Value="{StaticResource MainButtonHeight}"/>
<Setter Property="Width" Value="{StaticResource MainButtonWidth}"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Foreground" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
One style that would just define the images would look like :
<Style x:Key="ButtonImage1" TargetType="Button"
BasedOn="{StaticResource ButtonMain">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="???"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="???"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
You'd only have to use the style on your button
Concerning the images, it's not the type that you want to use, IIRC, the ImageBrush source can be the path to an image file (check MSDN for that they should have a nice example)
Solve your ImageSource problem with proper binding :
<ImageBrush ImageSource="{Binding Source, Source={StaticResource Open-active}}"/>
For your own properties ImageActive and ImageOver , build your own custom control :
public class MyButton:Button
{ ... }
And depending upon your Binding requirements, these properties can be simple one or DependencyProperties.
I have create a style for a button like this
<Style TargetType="{x:Type Button}" x:Key="BoutonRessources">
<Setter Property="Width" Value="18" />
<Setter Property="Margin" Value="-1,0,-2,0" />
<Setter Property="ToolTip" Value="Clear" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="BoutonToolbarSelected.png"/>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="22"/>
<Setter Property="Width" Value="32"/>
</Trigger>
</Style.Triggers>
</Style>
My button appear on my screen but when the mouse is over the button, it don't show my "BoutonToolbarSelected.png". Do you know why ?
Here is how i call my button :
<Button Style="{StaticResource BoutonRessources}" >
<Image Source= "xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png" Height="18"/>
</Button>
Thanks a lot :)
Because you set <Image Source= "xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png" Height="18"/> as Content of your button, the background will hide behind it.
You could change your trigger to:
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="BoutonToolbarSelected.png"/>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="22"/>
<Setter Property="Width" Value="32"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png"/>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="18"/>
</Trigger>
</Style.Triggers>