I am trying to hide the content of a button when the content is Null inside a style for a custom button.
Any help would be appreciated please.
My XAML:
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<Trigger Property="Content" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
Please look at my example. Your style is ok - maybe button content is not null and this is the cause why it's not working.
XAML code:
...
<StackPanel>
<Button Content="Red" Height="50" Background="Red" Click="btnSetNull_OnClick" />
<Button x:Name="btnYellow" Content="{x:Null}" Height="50" Background="Yellow">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<Trigger Property="Content" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button Content="Blue" Height="50" Background="Blue" Click="btnSetNotNull_OnClick" />
</StackPanel>
...
Code-behind:
Class MainWindow
Private Sub btnSetNull_OnClick(sender As Object, e As RoutedEventArgs)
btnYellow.Content = Nothing
End Sub
Private Sub btnSetNotNull_OnClick(sender As Object, e As RoutedEventArgs)
btnYellow.Content = "Yellow"
End Sub
End Class
Related
I have some base button styles that i want to inheritand make some minor changes, but not in the main style.
I extracted the main problem to a new application with minimal xaml.
The only thing i want to accomplish is change the button height when the button is disabled.
The two triggers are what i have tried , neither seem to work or give any debug messages about unable to find what its binding to.
<Button HorizontalAlignment="Center"
Height="90"
Margin="5"
Click="Button_Click"
VerticalAlignment="Bottom">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="Button.IsEnabled"
Value="False">
<Setter Property="Button.Height"
Value="50" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}}"
Value="False">
<Setter Property="Button.Height"
Value="50" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
Foo Bar
</Button>
The button click
private void Button_Click(object sender, RoutedEventArgs e)
{
(sender as FrameworkElement).IsEnabled = false;
}
Thanks for reading.
Both triggers do work. You set explicitly Height="90" and it overrides your style! If you want it works you should set the initial height in the style and delete it from Button tag.
<Style TargetType="Button">
<Setter Property="Button.Height" Value="90" />
<Style.Triggers>
<Trigger Property="Button.IsEnabled"
Value="False">
<Setter Property="Button.Height"
Value="50" />
</Trigger>
</Style.Triggers>
</Style>
As the title suggests, I'm looking for a trigger property that triggers when the left mouse button is clicked over the button. Problem being my button has a rectangle as it's control template and I'd like to change the fill/stroke when the button/rectangle is clicked.
The only trigger property I can find that works is "IsMouseOver"
Anything like MouseDown or IsPressed doesn't work.
My xaml right now:
<Button x:Name="my_Button" Click="my_Button_Click" Margin="268,91,-266,-94">
<Button.Template>
<ControlTemplate>
<Rectangle HorizontalAlignment="Left" Height="20" Stroke="Black" VerticalAlignment="Top" Width="141" Margin="105,10,0,0" StrokeThickness="2">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="Blue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="Red"/>
<Setter Property="Stroke" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</ControlTemplate>
</Button.Template>
</Button>
Where the Trigger Property "IsMouseOver" is I would like the property to be MouseDown, and then proceeding to set the fill and stroke of the rectangle to different colors.
xaml I've tried that hasn't worked:
<Trigger Property="MouseDown" Value="True">
<Setter Property="Fill" Value="Red"/>
<Setter Property="Stroke" Value="Black"/>
</Trigger>
Edit: I would like to clarify that IsMouseOver works perfectly with the trigger property, but I need it to be when the mouse is clicked on the button rather than hovered over.
See the DataTrigger below :
<Button x:Name="my_Button" Click="my_Button_Click" Margin="268,91,-266,-94">
<Button.Template>
<ControlTemplate>
<Rectangle HorizontalAlignment="Left" Height="20" Stroke="Black" VerticalAlignment="Top" Width="141" Margin="105,10,0,0" StrokeThickness="2">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="Blue" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=TemplatedParent}}" Value="True">
<Setter Property="Fill" Value="Red"/>
<Setter Property="Stroke" Value="Black"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</ControlTemplate>
</Button.Template>
</Button>
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 have the following button style that has a cross in it and is used for a close button on a TabItem
<Button Grid.Column="2"
Width="15"
Height="15"
HorizontalAlignment="Center"
VerticalAlignment="Center"
DockPanel.Dock="Right"
AttachedCommand:CommandBehavior.Event="Click"
AttachedCommand:CommandBehavior.Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.CloseWorkspaceCommand}">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<Path x:Name="ButtonPath"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M0,0 L1,1 M0,1 L1,0"
SnapsToDevicePixels="True"
Stretch="Uniform"
Stroke="{DynamicResource CloseButtonStroke}"
StrokeEndLineCap="Flat"
StrokeStartLineCap="Flat"
StrokeThickness="2"/>
</Grid>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"
Value="false" />
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"
Value="false" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Visibility" Value="Hidden" />
</MultiDataTrigger.Setters>
</MultiDataTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background"
Value="{DynamicResource CloseButtonBackgroundHighlighted}" />
<Setter TargetName="ButtonPath"
Property="Stroke"
Value="{DynamicResource CloseButtonStrokeHighlighted}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background"
Value="{DynamicResource CloseButtonBackgroundPressed}" />
<Setter TargetName="ButtonPath"
Property="Stroke"
Value="{DynamicResource CloseButtonStroke}" />
<Setter TargetName="ButtonPath"
Property="Margin"
Value="2.5,2.5,1.5,1.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
This produces
I want to add a CheckButton styled to show a pin next to the close button like VS2012. I can do this no problem, but I want to place the CheckBox inside the same button template above so I get highlighting when the mouse is over the area. The problem is the button above contains the Path that draws the 'X'.
Is there a was I can make the button style above generic so I can include either the 'X' Path or the CheckBox, without replicating all the trigger stuff?
Thanks for your time.
I would approach this by creating my button class like ToolBarButton below and have a dependency property ButtonType. I will set ButtonType on the ToolBarButton.
public enum ButtonType
{
Close =0,
Pin
}
public class ToolBarButton : Button
{
public ButtonType ButtonType
{
get { return (ButtonType)this.GetValue(ButtonTypeProperty); }
set { this.SetValue(ButtonTypeProperty, value); }
}
public static readonly DependencyProperty ButtonTypeProperty = DependencyProperty.Register(
"ButtonType", typeof(ButtonType), typeof(ToolBarButton), new PropertyMetadata(ButtonType.Close));
}
in xaml:
<local:ToolBarButton ButtonType="Pin"/>
Then I will add the trigger in style to check for buttontype and apply the controltemplate containing checkbox
<Style.Triggers>
<Trigger Property="ButtonType" Value="Pin">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<CheckBox/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
I am very new to WPF and needed some pointers as to why this is not working correctly.
I am trying to make a maximize button that will change to a restore button when clicked. I thought a toggle button with 2 different styles that would be changed in the code behind could work. I am first trying to get the maximize button working and have ran into a problem. I get the error 'System.Windows.Controls.Image' is not a valid value for the 'System.Windows.Controls.Image.Source' property on a Setter. in my xaml. I seem to be not understanding something completely. Any help would be most helpful :)
Ryan
<Style x:Key="Maximize" TargetType="{x:Type ToggleButton}">
<Style.Resources>
<Image x:Key="MaxButtonImg" Source="/Project;component/Images/maxbutton.png" />
<Image x:Key="MaxButtonHighlight" Source="/Project;component/Images/maxbutton-highlight.png" />
</Style.Resources>
<Setter Property="ContentTemplate">
<Setter.Value>
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="{DynamicResource MaxButtonImg}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="{DynamicResource MaxButtonHighlight}"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Setter.Value>
</Setter>
</Style>
<ToggleButton Name="MaxButton" Width="31" Height="31" BorderThickness="0" Click="MaxButton_Click" Margin="0,0,10,0" Tag="Max"
Style="{DynamicResource Maximize}" />
My code behind would do something simple like this:
private void MaxButton_Click(object sender, RoutedEventArgs e)
{
ToggleButton tg = (ToggleButton)sender;
if ( tg.IsChecked == true) {
tg.Style = (Style)FindResource("Restore");
this.WindowState = WindowState.Maximized;
} else {
tg.Style = (Style)FindResource("Maximize");
this.WindowState = WindowState.Normal;
}
}
You don't want to change the image on mouse over. I added my images to a folder called Images in the project and set build action on the images to Resource.
<Window.Resources>
<Image x:Key="minImage" Source="/Images/min.png" Height="16" Width="16" />
<Image x:Key="maxImage" Source="/Images/max.png" Height="16" Width="16" />
<Style TargetType="{x:Type ToggleButton}" x:Key="minMaxButtonStyle">
<Setter Property="Content" Value="{DynamicResource minImage}" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="{DynamicResource maxImage}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<ToggleButton Style="{StaticResource minMaxButtonStyle}" />
</StackPanel>
</Window>