I've got a button that is only conditionally enabled. I'd like to change the button's tooltip if the button is enabled or disabled.
<Button Name="OkButton" VerticalAlignment="Center" Command="{Binding Path=OkCommand}"
CommandParameter="{Binding}" Click="OkButtonClick" Content="OK">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="ToolTipService.ShowOnDisabled" Value="True" />
<Setter Property="ToolTip" Value="OK" />
<Style.Triggers>
<DataTrigger ***SomeCondition*** Value="False">
<Setter Property="ToolTip" Value="OK Disabled" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I know that I can probably bind to some property in my view model, but I would like to know if there's a way to handle this all in XAML.
it can be Trigger, not DataTrigger:
<Trigger Property="IsEnabled" Value="False">
<Setter Property="ToolTip" Value="OK Disabled" />
</Trigger>
Related
I have created a Button with an image that you can see below:
I used the following XAML code to create this Button:
<Button Grid.Column="3" Style="{StaticResource MaterialDesignFlatButton}" Padding="0"
ToolTip="Settings" Width="30"
IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}">
<materialDesign:PackIcon Kind="Cog" Width="32" Height="32" VerticalAlignment="Center" HorizontalAlignment="Center">
<materialDesign:PackIcon.Style>
<Style TargetType="materialDesign:PackIcon">
<Setter Property="Foreground" Value="WhiteSmoke" />
<Setter Property="Opacity" Value="0.7" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White" />
<Setter Property="Opacity" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</materialDesign:PackIcon.Style>
</materialDesign:PackIcon>
</Button>
My problem is that the icon color is changed only when the mouse is over the icon, not the Button. I want it to change color when the mouse is over the Button.
How can I fix it in my code?
You can use a RelativeSource binding to refer to the IsMouseOver property of the parent Button.
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" Value="True">
<Setter Property="Foreground" Value="White" />
<Setter Property="Opacity" Value="1" />
</DataTrigger>
</Style.Triggers>
I have an app in WPF. I am using entypo icons and i decalred one as a resource:
<Grid.Resources>
<iconPacks:Entypo x:Key="PlayIcon" Width="50" Height="30" Kind="ControllerPlay"></iconPacks:Entypo>
</Grid.Resources>
Let's say I have two icons like this ( play/pause icon) and I want to change between them when the user clicks on ToggleButton. I came up with something like this, but unfortunately, it's not working:
<ToggleButton>
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}"
Value="true">
<Setter Property="Source"
Value="{StaticResource PauseIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}"
Value="false">
<Setter Property="Source"
Value="{StaticResource PlayIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</ToggleButton>
Could anyone tell me if I can achieve it like this (with slight modifications) or point me into right direction?
You can't set the Source of an Image to a PackIconEntypo. Set the Content property of the ToggleButton instead:
<ToggleButton>
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content" Value="{StaticResource PlayIcon}" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Content" Value="{StaticResource PauseIcon}" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
I know that is possible disable a Control if the CheckBox is not checked, generally I did this:
<CheckBox x:Name="myCheckBox" />
<Button IsEnabled="{Binding ElementName=myCheckBox, Path=IsChecked}" />
this will enable the Button only if the CheckBox is checked, but there is a way in Xaml to enable the Button if the CheckBox is unchecked without create any Converter?
Pseudo code:
<CheckBox x:Name="myCheckBox" />
<Button IsEnabled="{Binding ElementName=myCheckBox, Path=IsUnChecked}" />
Best regards.
You may use the Binding with a DataTrigger:
<CheckBox x:Name="myCheckBox"/>
<Button x:Name="button">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=myCheckBox}"
Value="True">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Putting this answer to update visitors about the new syntax of DataTrigger to achieve the same. It worked for me on "Visual Studio 2015" or later.
<CheckBox x:Name="myCheckBox"/>
<Button x:Name="button">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=myCheckBox, Path=IsChecked}"
Value="True">
<DataTrigger.Setters>
<!--it would make the Button in Disabled state since checkbox is in Checked state-->
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger.Setters>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=myCheckBox, Path=IsChecked}"
Value="False">
<DataTrigger.Setters>
<!--it would make the Button in Enabled state since checkbox is in Unchecked state-->
<Setter Property="IsEnabled" Value="True"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I hope it helps all. Thanks!
I have a toggle button that has two data triggers that are bound to the buttons IsChecked property. Within the Data triggers I am setting the buttons content and also its command property. The problem that I am having is that when you click the button the data trigger is changing the command value and then firing the command. Is it possible to have the command fire first then the data trigger? Here is the code.
<ToggleButton x:Name="commandToggleButton" Grid.Row="0" Height="30" HorizontalAlignment="Left" Margin="26,24,0,0" VerticalAlignment="Top" Width="75">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=commandToggleButton, Path=IsChecked}" Value="False">
<Setter Property="Content" Value="Build" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Command" Value="{Binding Build}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=commandToggleButton, Path=IsChecked}" Value="True">
<Setter Property="Content" Value="Cancel" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Command" Value="{Binding CancelBuild}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
What I would like to happen is that when the button is clicked the first time for the Build command to be fired, then if it is clicked the second time for the CancelBuild command to be fired.
Keep it simple:
<ToggleButton IsChecked="{Binding EnableBuild}" FontWeight="Bold">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content" Value="Build" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="Cancel" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
ViewModel:
public Command Build {get;set;}
public Command Cancel {get;set;}
//...
private bool _enableBuild;
public bool EnableBuild
{
get { return _enableBuild; }
set
{
_enableBuild = value;
NotifyPropertyChange(() => EnableBuild);
if (value)
Build.Execute();
else
Cancel.Execute();
}
}
I am having the style trigger like below .
<Style x:Key="ValidationButtonErrorStyle" TargetType="Button" BasedOn="{StaticResource ResourceKey=btnStyle}" >
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="IsEnabled" Value="false" />
</Trigger>
</Style.Triggers>
</Style>
I want to add this style trigger to my button , so that when the validation error happens in the page ,
<Button Content="{Binding StringResources.XXXX, Source={StaticResource ResourceStrings}}"
Style="{StaticResource ResourceKey=ValidationButtonErrorStyle}"
Width="150"
Command="{Binding XXXX}">
</Button>
then my button should get disabled. if not it should be in enabled state .
I tried the above code samples but no luck. Can any one point me what i am missing or help me how to achieve this .
How about the following:
<Style x:Key="ValidationErrorStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="Button.IsEnabled" Value="False" />
</Trigger>
</Style.Triggers>
</Style>