I am not able to manage a solution for my problem.
Here is my Button
<Button BorderBrush="Black" IsDefault="True" IsEnabled="{Binding ContentManager.CanPreview}" x:Name="Preview" Grid.Column="1" Style="{DynamicResource MetroCircleButtonStyle}">
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock FontWeight="Bold">Preview</TextBlock>
<TextBlock>Preview the selected document</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
<Rectangle Margin="1,0,0,0" Width="17" Height="12" Fill="Black">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_eye}" />
</Rectangle.OpacityMask>
<Rectangle.Style>
<Style>
<Style.Triggers>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Button>
My question is how can I set my trigger to change the <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_eye}" /> when the button is not enable.
Create a Style that targets Rectangle class, move OpacityMask to Style as Setter, otherwise Style.Trigger won't be able to change local value, and create a Trigger on IsEnabled property being false to change OpacityMask to a different Brush
<Rectangle Margin="1,0,0,0" Width="17" Height="12" Fill="Black">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="OpacityMask">
<Setter.Value>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_eye}" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="OpacityMask">
<Setter.Value>
<!-- other brush -->
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
Maybe add the other visual brush as resource to your usercontrol/window/app
<Style.Resources>
<VisualBrush x:Key="otherBrush" Stretch="Fill" Visual="{StaticResource other_appbar_eye}" ></VisualBrush>
and use it in the trigger like this
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="OpacityMask" Value="{StaticResource otherBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
and move the default value to the style as well, since you´re not able to change it via trigger otherwise.
Related
I want to create a SearchBox and currently my code looks like below. I tried to change the ImageSource of the ImageBrush tag when the text box is empty but I don't know to bind the Text property from the Textbox properly. I want my SearchBox to look like this:
When the SearchBox is empty the button must to show the search image and when the SearchBox is not empty the button must to show the clear search image. Can anyone hepl me with this?
<TextBox Name="SearchTextBox" />
<Button Grid.Column="0" Style="{DynamicResource NoChromeButton}" BorderThickness="1"
VerticalAlignment="Center" HorizontalAlignment="Right" Width="25" Height="25" Click="Search_Click" Panel.ZIndex="1">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border>
<Grid>
<ContentPresenter />
<Grid x:Name="StatusPanel" Background="Black" Opacity="0"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="StatusPanel" Property="Opacity" Value="0.1"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="StatusPanel" Property="Opacity" Value="0.3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
<Button.Content>
<Rectangle x:Name="aaa" >
<Rectangle.Fill>
<ImageBrush ImageSource="pack://application:,,,/AssemblyName;component/Resources/Img1.png" />
</Rectangle.Fill>
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}" >
<Style.Triggers>
<DataTrigger Binding="{Binding Text.Length, ElementName=SearchTextBox, UpdateSourceTrigger=PropertyChanged}" Value="0" >
<DataTrigger.Setters>
<Setter Property="Fill">
<Setter.Value>
<ImageBrush ImageSource="pack://application:,,,/AssemblyName;component/Resources/Img2.png" />
</Setter.Value>
</Setter>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Button.Content>
</Button>
you are close. instead of setting <Rectangle.Fill> locally, use Style setter:
<Rectangle x:Name="aaa" >
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}" >
<Setter Property="Fill">
<Setter.Value>
<ImageBrush ImageSource="pack://application:,,,/AssemblyName;component/Resources/Img1.png" />
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Text.Length, ElementName=SearchTextBox}" Value="0" >
<DataTrigger.Setters>
<Setter Property="Fill">
<Setter.Value>
<ImageBrush ImageSource="pack://application:,,,/AssemblyName;component/Resources/Img2.png" />
</Setter.Value>
</Setter>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
it is necessary because Trigger cannot override local value
I am using below Control Template for my Radio Button. I have an issue with this code. Noticed CheckMark doesn't get collapsed when Radio Button is unchecked. Any help is appreciated.
<ControlTemplate x:Key="RadioButtonControlTemplate" TargetType="{x:Type RadioButton}">
<BulletDecorator x:Name="bulletDecorator" SnapsToDevicePixels="True" Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="30"
Height="30" >
<Ellipse x:Name="Border"
Fill="{StaticResource NormalBrush}"
StrokeThickness="3"
Stroke="{StaticResource NormalBorderBrush}" />
<Ellipse x:Name="CheckMark"
Margin="9"
Fill="{StaticResource GlyphBrush}" />
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter Margin="4,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True"></ContentPresenter>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Visibility" TargetName="CheckMark" Value="Collapsed"/>
</Trigger>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="14,0,0,0" SnapsToDevicePixels="True"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="2,0,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="bulletDecorator" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Your code is working just fine. I replaced your resource Brushes because you didn't provide them in your code, but using this basic example, I could see that the RadioButtons do work... you may need to sort out the label though, because they are disconnected from the 'check marks':
<ControlTemplate x:Key="RadioButtonControlTemplate" TargetType="{x:Type RadioButton}">
<BulletDecorator x:Name="bulletDecorator" SnapsToDevicePixels="True" Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="30" Height="30">
<Ellipse x:Name="Border" Fill="Red" StrokeThickness="3" Stroke="Black" />
<Ellipse x:Name="CheckMark" StrokeThickness="1" Margin="9" Fill="Green" />
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter Margin="4,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True"></ContentPresenter>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Visibility" TargetName="CheckMark" Value="Collapsed"/>
<Setter Property="Stroke" TargetName="CheckMark" Value="Blue"/>
</Trigger>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="14,0,0,0" SnapsToDevicePixels="True"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="2,0,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="bulletDecorator" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
...
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<RadioButton Template="{StaticResource RadioButtonControlTemplate}" Content="Yes" />
<RadioButton Template="{StaticResource RadioButtonControlTemplate}" Content="No" />
</StackPanel>
Here's what it looks like (sorry about the horrible colours):
I try to change the background of a toggle button everytime when it is checked or not,using 2 pictures. At runtime, the toggle button is simple and I don't see any image. This is my code:
<Canvas Height="25" Name="canvas1" Width="186" Background="White">
<ToggleButton Name="toggle1" Height="25" Padding="0" Width="27" Canvas.Left="131" Canvas.Top="0" BorderBrush="{x:Null}" Foreground="{x:Null}">
<ToggleButton.Resources>
<Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/WpfApp;component/Images/image1.png" Stretch="Uniform" TileMode="None" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/WpfApp;component/Images/image2.png" Stretch="Uniform" TileMode="None" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Multiple things we can point here.
Firstly you're specifying the Style in ToggleButton.Resources with a x:Key. Thus it's not implicitly set. Setting a Style in resources of the item for which it applies in it's own scope is kinda weird. Rather just apply the Style directly as <ToggleButton.Style>.
Next, when working with Style.Triggers, make it a practice to specify a default Setter. This will prevent some headache for you. Also now instead of having two triggers for IsChecked=False/True, you only need one trigger as the other Background can be set as default.
Finally it seems like all you need from the ToggleButton is the IsChecked property and switch an Image. So just override the Template and provide a simple one yourself. This way you assure the behavior to stay consistent in all version of the OS and not rely on internal default template's working nicely for your customization(which wouldn't work in Windows-8 btw, what you're trying here for IsChecked=True due to internal overrides in default ControlTemplate)
So putting this all together we get:
<Style x:Key="MyToggleButtonStyle"
TargetType="ToggleButton">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/WpfApp;component/Images/image2.png"
Stretch="Uniform"
TileMode="None" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked"
Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/WpfApp;component/Images/image1.png"
Stretch="Uniform"
TileMode="None" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
and apply it to your ToggleButton
<ToggleButton Name="toggle1" Height="25" Padding="0" Width="27" Canvas.Left="131" Canvas.Top="0" BorderBrush="{x:Null}" Foreground="{x:Null}" Style="{DynamicResource MyToggleButtonStyle}">
you can ofc remove the Key in the Style and make it implicitly apply to "all" ToggleButton's within the scope of the Style definition if you choose to.
Can you check if the build action for your images is Embedded Resource please?
Define the style directly for your togglebutton like below. it should fix your issue:
<ToggleButton>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/WpfApp;component/Images/image2.png" Stretch="Uniform" TileMode="None" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/WpfApp;component/Images/image1.png" Stretch="Uniform" TileMode="None" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
You should remove the x:Key and it will work.
I'm trying to change the image when mouse is over a button, but it's not working here is what am trying to do :
<Button x:Name="Play" Content="" ClickMode="Press" BorderThickness="0" UseLayoutRounding="True" Height="120" Width="224">
<Button.Background>
<ImageBrush ImageSource="Resources/Play 1.gif"/>
</Button.Background>
<Button.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ImageBrush.ImageSource" Value="Resources/Play 2.gif"></Setter>
</Trigger>
</Button.Triggers>
</Button>
But this gives me this error : Triggers collection members must be of type EventTrigger.
How would I make it work?
It's correct - you can only put EventTriggers in there. You need to move your Trigger into the button's Style:
<Button x:Name="Play" Content="" ClickMode="Press" BorderThickness="0" UseLayoutRounding="True" Height="120" Width="224">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="..\Resources\Play 1.gif"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="..\Resources\Play 2.gif"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Something like that, I think (haven't tested it).
EDIT: This switches between the correct images, but it doesn't work correctly (it starts off with Play 1.gif, transitions to Play 2.gif, but then transitions to the button's underlying colour). I think you'll have to override the button's ControlTemplate to prevent this from happening, as suggested in the comments.
<Window x:Class="Image_ChangeOnHover"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Image_ChangeOnHover" Height="300" Width="300">
<Grid>
<Image Stretch="None" Margin="10">
<Image.Resources>
<Style TargetType="{x:Type Image}">
<!-- Default image -->
<Setter Property="Source" Value="/Resources/Off2.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- Hover image -->
<Setter Property="Source" Value="/Resources/On.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Resources>
</Image>
</Grid>
</Window>
I have a rectange with several labels and images over it, and I have it so that when the user hovers their mouse over the rectangle the background changes to a gradient:
<Rectangle Height="88" HorizontalAlignment="Left" Margin="54,28,0,0" Name="rectangle2" VerticalAlignment="Top"
Width="327" Cursor="Hand">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="#eee" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
However, when I hover over one of the labels that is over the rectangle the background gradient does not show.
I want to make it so that the gradient shows when hovering over the labels as well as the rectangle.
Is this possible?
If by "over" you mean overlayed and not above you can wrap the contents in a Grid (for above you could do this as well i guess, but you should define rows & columns) and use a DataTrigger which triggers if the mouse is over the wrapping grid and not only the rectangle itself, e.g.:
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle Width="100" Height="100" StrokeThickness="1" Stroke="Black">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="Transparent" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Grid}}" Value="True">
<Setter Property="Fill">
<Setter.Value>
<!-- Brush here -->
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<Label Name="label" Content="This is a Label" />
</Grid>
Alternatively if the label is overlayed you can make mouse events pass through the Label by setting IsHitTestVisible to false.
Because the other elements are on top of the rectangle, I think you will need to hook to the PreviewMouseMove event for the rectangle.
UIELement.PreviewMouseMove: http://msdn.microsoft.com/en-us/library/system.windows.uielement.previewmousemove.aspx
Preview events: http://msdn.microsoft.com/en-us/library/ms752279.aspx