I'm trying to do something similar to this:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content"
Value="No mouse over" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Content">
<Setter.Value>
<CheckBox Content="Mouse is over" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Window>
However, I get a run-time XamlParseException with a message of:
Cannot add content of type
'System.Windows.Controls.CheckBox' to
an object of type 'System.Object'.
Error at object
'System.Windows.Controls.CheckBox
I'm actually trying to draw different icons for the button's content depending on external conditions. So I'm actually trying to use a DataTrigger, but the example above simplifies the problem. Any ideas?
The actual error is occurring because Visuals can not be directly set as a Setter value.
You can get the behavior you are looking for though, by setting the ContentTemplate using a DataTemplate, or by creating your content as a resource, either specific to the button or located elsewhere.
<Button>
<Button.Resources>
<CheckBox x:Key="Local_MouseOverContent" Content="Mouse is over" />
</Button.Resources>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content" Value="No mouse over" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content"
Value="{StaticResource Local_MouseOverContent}" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content" Value="No mouse over" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="Button">
<CheckBox Content="Mouse is over" />
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
REMARK! Exactly your example works in .NET Framework 4 without any Changes !!!!
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content"
Value="No mouse over" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Content">
<Setter.Value>
<CheckBox Content="Mouse is over" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
If you are making a generic style to be used by buttons all around your app, you will get visual tree conflicts using the approach where the image is a resource. So the template is your only choice in that case.
WARNING: This may not be the best or correct way to do it. Make sure you read the other answers on this page as well.
Pretty sure you'd want to use a control template in this sort of situation. Something like:
<style>
<Setter Property="Content">
<Setter.Value>
<ControlTemplate>
<Image Img="something.jpg" />
</ControlTemplate>
</Setter.Value>
</Setter>
</style>
And add a control template in the trigger for the on-hover.
Here's a good link
Related
i have an ExtendedTreeView control which extendes TreeView. My extendedTreeView has a property called Highlight so unlike a normal TreeView, i want the extendedTreeView to highlight items based on this Highlight property rather than IsSelected. So I have a style defined for a TreeView like below.
<Style x:Key="TreeViewStyle" TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Border Name="Bd"
Background="Transparent"
//other stuff
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Bd" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then i define another style for the extendedTreeView which is based on the TreeViewStyle. The problem is that when i try to set "Bd" which is the border, it can't recognize it and has no idea what im referring to.
<Style x:Key="TreeViewStyle2" TargetType="{x:Type controls:ExtendedTreeView}" BasedOn="{StaticResource TreeViewStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<ControlTemplate.Triggers>
<Trigger Property="controls:ExtendedTreeView.Highlight" Value="true">
<Setter TargetName="Bd" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
IS there anyway of fixing this? or an alternative way of doing it? thanks
I am trying to trigger ToggleButton programmatically using C#.
I have a ToggleButton the switch imaged between muted and unmuted. If I toggle the button to muted I have the expected image but if I change the VolumeBar I have to trigger the button from C# because if doesn't do it automatically.
<ToggleButton x:Name="MuteBtn" Height="20" Width="20" Background="Transparent" Click="MuteButton_Click">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content">
<Setter.Value>
<Image Source="/Resources/audio-volume_on.ico" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content">
<Setter.Value>
<Image Source="/Resources/volume_off.ico" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
I have a class called VolumeBar_ValueChanged that has to Toggle the button based on the VolumeBar Value.
As #Anu Viswan said, The isChecked property may solve your problem.
Try to use ControlTemplate for ToggleButton.
<ToggleButton>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Image x:Name="borderImage" Source="Image1.jpg"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Source" Value="Image2.jpg" TargetName="borderImage"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
I am developing an app and trying to stick to an MVVM model, I have a button that is just bound to a command. Currently the command can be enabled / disabled and greys out the button when the command is set to CanExecute false. But I want to add the ability to show validation errors on the button (by changing its color to red, maybe showing a tooltip).
The validation is currently already shown in another location in the UI, but the users are getting annoyed that the button is enabled and they click it only to have a message box pops up telling them they shouldn't of clicked the button because there is a validation error. But just disabling the button completely without showing them why would make the users confused(since they overlook the large red validation error at the bottom of the screen). So how can I show additional information on the save button?
This is my current button xaml:
<Button Name="SaveDataPointButton" Style="{StaticResource ImageButton}" Command="{Binding OpenDataPoint.SaveDataPointEditsCommand}" Margin="5,0" VerticalAlignment="Stretch">
<Image Source="save.png" Stretch="None" ToolTip="Save Edits"/>
</Button>
And the style that is changing its appearance when IsEnabled is false, is it possible to somehow inspect some other command state from the style to make the button red during validation errors?
<!-- Style for all of the nav and save buttons in the datapoints view -->
<Style x:Key="ImageButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="Border"
BorderThickness="0">
<ContentPresenter
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="LightGray"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Gray"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Command" Value="{x:Null}">
<Setter Property="IsEnabled" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
I ended up using a DataTrigger bound to another property on the view model to change the background color, but because I was setting a ControlTemplate in the style, the only way I could figure out to make the DataTrigger apply a background change was to copy the entire style and put the DataTrigger on the Border element in the control template. Since apparently you can't reference a child element from the new ControlTemplate from outside that control template.
<!-- Style for all of the nav and save buttons in the datapoints view -->
<Style x:Key="ImageSaveButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="Border"
BorderThickness="0">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding OpenDataPoint.HasValidationError}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<ContentPresenter
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="LightGray"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Gray"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Command" Value="{x:Null}">
<Setter Property="IsEnabled" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
I'm trying to customize my ToggleButtons so that when checked they say 'Yes' in green and when not checked, say 'No' in red.
I've created the following style which is sitting in my Styles resource dictionary.
<!-- ToggleButtons -->
<Style x:Key="YesNoToggleStyle" TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="SpringGreen" />
<Setter Property="Content">
<Setter.Value>
<TextBlock Text="Yes"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="Crimson" />
<Setter Property="Content">
<Setter.Value>
<TextBlock Text="No"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
This works ... sort of. If the ToggleButton is the last one of either value, then it displays correctly. All previous buttons with the same value are blank. The height was also shrinking, but I fixed that with the 'Height' Setter above the triggers. To illustrate, when a new record is being created it looks like:
and after I've clicked buttons 1, 2, and 3 and 1 again:
I originally had the style referenced from the surrounding grid:
<Grid>
...
<Grid.Resources>
<Style BasedOn="{StaticResource YesNoToggleStyle}" TargetType="{x:Type ToggleButton}" />
</Grid.Resources>
But changing that so each ToggleButton references the style individually (<ToggleButton Style="{StaticResource YesNoToggleStyle}" ... />) hasn't made a difference.
I looked at Customizing the toggle state of a toggle button in wpf, and Override ToggleButton Style where the effect is the same, but they talk about external images, and my issues is all within wpf.
I also looked at the second answer to: i want to change backcolor of toggle button when toggle button ischecked and viceversa in WPF but a) I only have the blend + sketchflow preview that comes with VS2012, and b) i'm a total noob with blend and can't get from Select the "Checked State" to Reset the Background Color instruction in the answer (plus i'd be surprised if this task requires the blend tool).
Can anyone show me what to do to get multiple ToggleButtons to use the same style properly?
This works for me. Somewhere in Dictionary1.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="YesNoToggleStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="Crimson" />
<Setter Property="Content" Value="No"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="SpringGreen" />
<Setter Property="Content" Value="Yes"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
Note, that style is based on ToolBar.ToggleButtonStyle.
<Grid>
<Grid.Resources>
<ResourceDictionary Source="pack://application:,,,/Dictionary1.xaml"/>
</Grid.Resources>
<ItemsControl ItemContainerStyle="{StaticResource YesNoToggleStyle}">
<ToggleButton />
<ToggleButton />
<ToggleButton />
</ItemsControl>
</Grid>
try to replace Content property to ContentTemplate:
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="Yes"/>
</DataTemplate>
</Setter.Value>
</Setter>
In my case I wanted to have a "Locked" ToggleButton in a common dll defined and reused across my Apps.
Here's my result, which worked for me. Maybe someone find it useful (put this in a Resourcedictionary.xaml):
<BitmapImage x:Key="LockedLock"
UriSource="/...;component/Resources/Lock_closed_16p.png" />
<BitmapImage x:Key="OpenLock"
UriSource="/...;component/Resources/Lock_open_16p.png" />
<Style x:Key="LockButton"
TargetType="ToggleButton">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{DynamicResource OpenLock }"
Width="12"
Height="12"
Name="contentimage" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton , AncestorLevel=1, Mode=FindAncestor }, Path=IsChecked}"
Value="True">
<Setter Property="Image.Source"
TargetName="contentimage"
Value="{DynamicResource LockedLock }" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Credits to:
Setting Button's Content to <Image> via Styles
Setter Target Name not recognized
I'm trying to add OuterGlowBitmapEffect effect to TextBox when Mouse hovers it.
I use triggers. Here is some code:
<TextBox Height="23" HorizontalAlignment="Left" Style="{DynamicResource TextBoxStyle}" Margin="12,283,0,0" Name="textBox1" VerticalAlignment="Top" Width="147" Text="" />
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="FontSize" Value="14" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Red" GlowSize="10"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
But it's not working. What i missed?
From the documentation of BitmapEffect:
[ObsoleteAttribute("BitmapEffects are deprecated and no longer function. Consider using Effects where appropriate instead.")]
You can simulate a glow using the Effect property with an instance of DropShadowEffect.
try this
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10" Color="Red" ShadowDepth="0"/>
</Setter.Value>
</Setter>
</Trigger>