I'm looking to implement this functionality: A button, bound to a command, that can signal back wether the command was successful in form of a red or green flash. At the same time, I want the button to look like other buttons.
This is the code I have now:
<Button IsEnabled="{Binding EmptyingAllowed}" Content="Töm lista" Foreground="#555555" FontWeight="SemiBold" Height="20" Width="65" Command="{Binding EmptyListCommand}" >
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderBrush="#BBBBBB" Padding="1" BorderThickness="0,0,1,1" Background="#DDDDDD">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ClearedOk}" Value="Ok">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation AccelerationRatio="0.2" DecelerationRatio="0.01" AutoReverse="True" Duration="0:0:1" To="LawnGreen" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding ClearedOk}" Value="Error">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation AccelerationRatio="0.2" DecelerationRatio="0.01" AutoReverse="True" Duration="0:0:1" To="Red" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
When the command is executed, ClearedOk is set to "Ok" or "Error" and then to "Empty", this causes the flash I'm looking for, unfortunately, the usual mouseOver-effect is lost for some reason, and if I add a mouseOver-trigger, it always takes precedence over the flashing effect, meaning the flash is only visible of the button isn't mouseOver:ed.
Is there a solution to this?
Try to make datatemplate and model with properties of state and then binding in template to this properties.
<DataTemplate x:Key="DataTemplate">
<Grid >
<Ellipse Stroke="White"
StrokeThickness="5"
Fill="{Binding State, Converter={StaticResource CheckToColorConverter}}"/>
</Grid>
</DataTemplate>
Related
I have a WPF page with a TabControl in it, and I wanted to design the tabs to have a nice underline when selected and on mouse hover.
I've managed to do that but each tab has a different length, and it seems that I can't bind a property of the TabItem inside of its animation.
This is what i have done so far:
<TabControl Width="{Binding ActualWidth,
ElementName=cnvsMain}" Height="{Binding
ActualHeight, ElementName=cnvsMain}"
BorderThickness="0" >
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<StackPanel>
<Border Name="Border"
BorderThickness="1,1,1,0"
BorderBrush="Gainsboro"
CornerRadius="6,6,0,0"
Margin="2,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
<Label Name="TabUnderline" Background="LimeGreen"
Margin=" 5, 0" Height="5" Width="0"/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="TabUnderline"
Storyboard.TargetProperty="Width"
From="0" To="100"
Duration="0:0:0.1"
AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="TabUnderline"
Storyboard.TargetProperty="Width"
From="100" To="0" Duration="0:0:0.1"
AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="Rooms">
<StackPanel>
<Label Content="TODO: List all rooms" />
<Label Content="TODO: Create room button" />
</StackPanel>
</TabItem>
<TabItem Header="Statistics" />
<TabItem Header="Details" />
</TabControl>
It works great but there is one simple flaw:
The under line will always be 100 pixels (Or is it units?) wide, and each tab has its unique and different width. I've tried to replace the hard-coded 100 to {Binding ActualWidth} or using a RelativeSource to get the width of the TabItem, but I keep getting an exception everytime this page is being loaded because of a binding-error.
How can I bind a TabItem's property to a value inside its own animation? Is it even possible?
I am trying to create a storyboard, so when a user clicks on a textbox, its copies the text to their clipboard and shows a tooltip saying copied, which then fades away.
Here is my attempt:
xaml:
<TextBox Name="PolyValue" Text="{Binding .}" IsReadOnly="True" BorderThickness="0" Background="White"
VerticalAlignment="Center" PreviewMouseDown="CopyTextBox" >
<TextBox.ToolTip>
<ToolTip Style="{StaticResource TooltipPopupFadeAway}" IsOpen="True" Opacity="0" Background="Transparent" BorderThickness="0">
<Border Background="White" BorderBrush="Black" BorderThickness="1" CornerRadius="3" >
<Label Content="Copied" Padding="5, 2" />
</Border>
</ToolTip>
</TextBox.ToolTip>
</TextBox>
Here is the Storyboard:
<Style x:Key="TooltipPopupFadeAway" TargetType="ToolTip">
<Style.Triggers>
<DataTrigger Binding="{Binding Opacity, RelativeSource={RelativeSource Self}}" Value="1">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="ClosePopupStoryBoard">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:01" From="3" To="0" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
Code behind:
private void CopyTextBox(object sender, MouseButtonEventArgs e)
{
if(sender is TextBox textBox)
{
Clipboard.SetText(textBox.Text);
(textBox.ToolTip as ToolTip).IsOpen = false;
(textBox.ToolTip as ToolTip).IsOpen = true; //this recalculates the position
(textBox.ToolTip as ToolTip).Opacity = 1;
}
}
This works exactly how I want it to, however it only works once, after it has been shown and the user clicks again nothing happens.
After setting a break point in the CopyTextBox method, the of the ToolTip opacity is 0 even after programmatically setting it to 1.
I am not sure what I am doing wrong?
This is the sort of approach I mean.
Just binding the text property means you need no code.
I'm not sure this does exactly what you want because you seem to have previewmousedown showing the tooltip. Which is a bit odd for a tooltip since mouseover shows them.
<Window.Resources>
<ControlTemplate x:Key="TooltipPopupFadeAway" TargetType="ToolTip">
<Border Background="Yellow">
<TextBlock Text="{Binding PlacementTarget.Text, RelativeSource={RelativeSource AncestorType={x:Type ToolTip}}}"
Name="TheText"
/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ToolTip.Opened">
<BeginStoryboard>
<Storyboard TargetProperty="Opacity">
<DoubleAnimation From="1.0" To="0" Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<TextBox>
<TextBox.ToolTip>
<ToolTip Template="{StaticResource TooltipPopupFadeAway}"/>
</TextBox.ToolTip>
</TextBox>
</Grid>
And you could set that template and tooltip etc via style if it suited you better. I used a yellow background so I can see it easy. The tooltip probably doesn't exactly match what you had.
You should trigger directly on the IsOpen property. Make sure to set the default Opacity to 0, and do not explicitly set it to 1 afterwards.
<Style x:Key="TooltipPopupFadeAway" TargetType="ToolTip">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Opacity" Value="0"/>
<Setter Property="IsOpen" Value="False"/>
<Style.Triggers>
<Trigger Property="IsOpen" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Duration="0:0:1" From="3" To="0"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
In code behind, do not to set the Opacity:
private void CopyTextBox(object sender, MouseButtonEventArgs e)
{
if (sender is TextBox textBox)
{
Clipboard.SetText(textBox.Text);
((ToolTip)textBox.ToolTip).IsOpen = false;
((ToolTip)textBox.ToolTip).IsOpen = true;
}
}
I have a custom message box with two button 'Yes' and 'No'. Button 'Yes' is green and button 'No' is red.
I apply the same style for the two buttons through a xaml file defined separately as below:
MsgBoxButtonStyle.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button"
x:Key="MsgBoxButtonStyle">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="TextBlock.TextAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Border" CornerRadius="0"
BorderBrush="#000" BorderThickness="1,1,1,1"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
These two buttons are place in my WPF window as below:
<Window x:Class="My.XAML.Controls.Windows.WpfMessageBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/My.XAML;component/Styles/MsgBoxButtonStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Button Name="btnYes" Content="Yes"
Click="Button_Click" Foreground="Black"
Style="{StaticResource MsgBoxButtonStyle}"
Background="#b6dbd6"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
<Button Name="btnNo" Content="No"
Click="Button_Click" Foreground="Black"
Style="{StaticResource MsgBoxButtonStyle}"
Background="#dbb6b6"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
</Window>
Now, I would like to perform a nice effect when mouse is positioned over the buttons, some kind of blinking or whatever using storyboard and dependant on the color of the button.
Also I would like to put this storyboard within my existing style file MsgBoxButtonStyle.xaml and no put each storyboard in the window for each button, i want to share it.
How can I do this? some one can provide me a nice effect for buttons?
Just add triggers to the style. Here's an example to start you off.
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
I am trying to make something like this:
Basically, I made the email button, and I want to make a custom textbox with text in it that slowly fades in when the mouse enters the Email button.
Now, I made the custom box like this:
<Style x:Key="AppearingTextbox" TargetType="{x:Type TextBox}">
<Setter Property="Cursor" Value="Arrow"/>
<Setter Property="Foreground" Value="#3E82C4"/>
<Setter Property="Background" Value="#0F1C2B"/>
<Setter Property="Opacity" Value="0.4"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Path Data="M0 0 30 0 50 -15 70 0 100 0 100 30 0 30z" Fill="#0F1C2B"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I am using it in the window like this:
<TextBox Style="{DynamicResource AppearingTextbox}" Height="30" Width="100" FontSize="14">
aaaaaaaaaa
</TextBox>
However, all I get is the box filled with this grayish/black color and when I try to write in it nothing happens. I am a bit new to all of this so not sure what I'm doing wrong.
Also how would i make it appear or disappear on hover of another button?
I was thinking maybe of making a on mouseover effect on the Email button and link it somehow to the TextBox opacity... don't know how to do it yet..
Any help or insight would be appreciated.
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Ikona, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard >
<Storyboard TargetProperty="Opacity" Duration="00:00:00.3" AutoReverse="False">
<DoubleAnimation From="0" To="1" Duration="00:00:00.3"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard >
<Storyboard TargetProperty="Opacity" Duration="00:00:00.3" AutoReverse="False">
<DoubleAnimation From="1" To="0" Duration="00:00:00.3"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
By adding this below the last closing of <Setter> tag in above code I managed to get the fade in and fade out animation on hover over the button.
I still have the issue of nothing being writen in my custom made box. Do i need to enable or change some property to get it to work? I have a feeling that the "Fill" is the problem here..but do not know what to do about it.
This code will do what you want:
<Grid>
<Button Width="100" Height="50" VerticalAlignment="Top" x:Name="SomeButton"></Button>
<TextBox Width="200" Height="200" Background="Red" Opacity="0" Text="Some TextBox">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=SomeButton, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard >
<Storyboard TargetProperty="Opacity" Duration="00:00:01" AutoReverse="True">
<DoubleAnimation From="0" To="1" Duration="00:00:01"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</Grid>
The TextBox's Style simply says to watch for the Button's IsMouseOver property and when it is set to true to fade in in 1s. When the condition is false the TextBox fades out in 1s (AutoReverse="True")
Just another option to describe what I meant by tooltip, you could do something like this. Just thrown together quick in notepad so you'll probably want to tweak it if you decide to go this route.
<Button Content="Blah" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip="Blah Blah Blah" ToolTipService.Placement="Center">
<Button.Resources>
<Style TargetType="{x:Type ToolTip}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid Margin="0,60,0,0">
<Path Data="M0 0 30 0 50 -15 70 0 100 0 100 30 0 30z" Fill="#3E82C4" Stretch="Fill"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,8"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Resources>
</Button>
I am trying to create a WrapPanel ListBox with a Button DataTemplate using this style:
<Style x:Key="lbxStyle" TargetType="ListBox">
<Setter Property="Background" Value="{StaticResource primaryBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Margin" Value="6"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel
IsItemsHost="True"
Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<Border
HorizontalAlignment="Left"
VerticalAlignment="Top"
BorderBrush="White"
Background="Transparent"
BorderThickness="2"
Margin="4,2,0,0">
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="
(Border.Background).
(SolidColorBrush.Color)"
From="Transparent"
To="{StaticResource accentColorTwo}"
Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="
(Border.Background).
(SolidColorBrush.Color)"
From="{StaticResource accentColorTwo}"
To="Transparent"
Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Border.Triggers>
<ContentPresenter
TextBlock.TextAlignment="Center"
TextBlock.Foreground="White"
TextBlock.FontFamily="SegoeUI"
TextBlock.FontSize="14"
Content="{Binding}"
Name="content"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
In the main window, it referenced like this:
<ListBox
x:Name="lbxUninspectedPrints"
Height="125"
Margin="16,0"
Style="{StaticResource lbxStyle}"
ItemsSource="{Binding UninspectedPrintList}"
SelectedValue="{
Binding DiePrintNav.SelectedDiePrintString,
Mode=OneWayToSource}"/>
But it does not want to wrap properly. Here is a screenshot:
So the trick was to move the width, height and alignment setters out of the border and into the button itself. I have made some other changes, but the working version of this list box is posted below (note that I had to move everything out of a style and put in inline with the ListBox reference due to binding issues).
<ListBox
Name="lbxUninspectedPrints"
Height="125"
Margin="16,0"
Background="{StaticResource primaryBrush}"
Foreground="White"
VerticalAlignment="Top"
VerticalContentAlignment="Top"
HorizontalContentAlignment="Left"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding UninspectedPrintList}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Button
DataContext="{Binding}"
Width="44"
Height="24"
VerticalAlignment="Top"
VerticalContentAlignment="Center"
HorizontalAlignment="Left"
HorizontalContentAlignment="Center"
Content="{Binding}"
Command="{
Binding DataContext.DiePrintNav.UninspectedPrintSelectedCommand,
RelativeSource={RelativeSource AncestorType=ListBox}}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border
BorderBrush="White"
BorderThickness="2"
Background="Transparent">
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="
(Border.Background).
(SolidColorBrush.Color)"
From="Transparent"
To="{StaticResource accentColorTwo}"
Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="
(Border.Background).
(SolidColorBrush.Color)"
From="{StaticResource accentColorTwo}"
To="Transparent"
Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Border.Triggers>
<ContentPresenter
TextBlock.TextAlignment="Center"
TextBlock.Foreground="White"
TextBlock.FontFamily="SegoeUI"
TextBlock.FontSize="14"
Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>