I want to implement the button expanding animation where when user hovers over the top button, a sneak peak of the other functions each with their own button will be displayed below that top button on which the user hovered initially. I wrote the below XAML to achieve that and it is working as expected.
XAML:
<Button Name="panel" Margin="0,40,0,0">
<Button.Template>
<ControlTemplate x:Name="abc">
<Grid>
<Button Width="150" Name="addButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="+" Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="addFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Add new task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<!--Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Hidden"></Setter>
</-->
<Trigger Property="Margin" Value="0,45,10,0">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="remButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="-" Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="remFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Remove task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="Margin" Value="0,85,10,0">
<Setter Property="Visibility" TargetName="remFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="editButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="..." Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="editBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="editTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Opacity="0" FontSize="14" Width="90">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="editTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="editTxtBlock" Value="Hidden"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=editButton}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="enterBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Name="exitBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Initial Screenshot:
When the user hovers on the blue button, two additional buttons will drop from behind this blue button. It is difficult to take screenshot for that as those two buttons will be displayed only until the user is hovering on the the blue button. This is exactly my problem.
If the user wants to click on the two additional buttons which come down, the user will have to move the cursor away from the blue button and immediately these two additional buttons will go away and hide behind the blue button and thus escaping the user's click. How can I overcome this?
Is there anyway I can overwrite the Trigger.ExitActions if the user clicks on the blue button instead of hovering on it? Or any other event which I can fire up to disable the ExitActions for a while?
I am trying to create a click event for the blue button and handle the required behaviour in the code behind but if there are any other better approaches, please let me know.
Either use VisualStates one for Normal and another for Expanded state.
Or, use ToggleButton instead of Button , in case of which your code would look like this :
<Button Name="panel" Margin="0,40,10,31">
<Button.Template>
<ControlTemplate x:Name="abc">
<Grid>
<Button Width="150" Name="addButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="+" >
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="addFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Add new task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<!--Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Hidden"></Setter>
</-->
<Trigger Property="Margin" Value="0,45,10,0">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="remButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="-">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="remFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Remove task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="Margin" Value="0,85,10,0">
<Setter Property="Visibility" TargetName="remFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<ToggleButton Width="150" Name="editButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="...">
<ToggleButton.Template>
<ControlTemplate x:Name="editBtn" TargetType="ToggleButton">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="editTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Opacity="0" FontSize="14" Width="90">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="editTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="editTxtBlock" Value="Hidden"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=editButton}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="enterBoard">
<Storyboard FillBehavior="HoldEnd">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Name="exitBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Related
<TabControl x:Name="tabControl" TabStripPlacement="Top" BorderBrush="White" FontSize="14" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="98" Margin="0,2,0,0" VerticalAlignment="Top" Width="992" FontFamily="Segoe UI">
<TabControl.Resources>
<Style TargetType="TabItem">
<Style.Triggers>
<Trigger Property="TabItem.IsSelected" Value="True">
<Setter Property="TabItem.Foreground" Value="#FF0090D3"/>
<Setter Property="TabItem.FontSize" Value="14"/>
<Setter Property="TabItem.FontFamily" Value="Segoe Ui SemiBold"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="0,0,0,0" BorderBrush="White" Background="White" CornerRadius="13,13,13,13" Margin="1,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).Color" From="White" To="LightGray" Duration="0:0:0.2"/>
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).Color" From="LightGray" To="White" Duration="0:0:0.2"/>
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Width="190" Visibility="Hidden" />
<TabItem Height="25" IsSelected="True" Width="63" Header="Home">
<Canvas>
<Rectangle x:name="rect1" Fill="#FFF4F4F5" Height="59" Width="58" Canvas.Top="3" Canvas.Left="1">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Fill.Color" To="LightGray" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Fill.Color" To="White" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Canvas>
</TabItem>
<TabItem Width="63" Header="Tools"/>
<TabItem Width="76" Header="Add-ons" />
</TabControl>
The code allows me to change the tab header color when the mouse is over the header.However,the problem is....when mouse is over a content inside a tabitem,the MouseEnter event of both the TabItem and the content fires.Which results in : If i hover over a content(eg. a rectangle that i'm using),the MouseEnter event of the content/control is fired.But it also fires the 'MouseEnter' event of the tabItem...So the tabItem/TabHeader chages it's color even when i don't hover over the header/TabItem rather when i hover over a control/content inside the tabitem...How do i prevent this ?
Update
I found this code :
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" />
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
from here.But where should i put it ?
Damn!! It was reallllyyy easy! Just changed :
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
To :
<ControlTemplate.Triggers>
<EventTrigger SourceName="ContentSite" RoutedEvent="MouseEnter">
I'm new to WPF and I would like to change to color of the text and icon of a button template. But it seems I can only change the opacity.
I guess I should apply the style to the children of the button but I don't know how.
Here is the template:
<Button x:Name="btnApp1" Width="56" Height="66" Margin="0,0,0,0" Style="{StaticResource AppButton}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<iconPacks:PackIconMaterial Kind="StarOutline" Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#FFFFFFFF" />
<TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="#FFFFFFFF" FontWeight="Bold">PVIE</TextBlock>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
And here is the style:
<Style x:Key="AppButton" TargetType="{x:Type Button}">
<Setter Property="Opacity" Value="0.25" />
<Setter Property="Foreground" Value="#FFFF9966" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0:0.3" />
<!--<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="Green" Duration="0:0:0:0.3" />-->
<ColorAnimationUsingKeyFrames Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Green" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.25" Duration="0:0:0:0.3" />
<!--<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:0:0.3" />-->
<ColorAnimationUsingKeyFrames Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="White" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Thanks for your help.
Bind the Foreground property of the TextBlock and the Icon in the ControlTemplate using a {TemplateBinding}:
<Button x:Name="btnApp1" Width="56" Height="66" Margin="0,0,0,0" Style="{StaticResource AppButton}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<iconPacks:PackIconMaterial Kind="StarOutline" Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center"
Foreground="{TemplateBinding Foreground}" />
<TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom"
Foreground="{TemplateBinding Foreground}" FontWeight="Bold">PVIE</TextBlock>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
I have a reset button - the desired behaviour is to increase in size on mouseover and, once clicked, have a border around it.
The IsMouseOver trigger works, but I can't get the MouseUp event trigger to work (once pressed the button does not display a border).
I have tried the following:
1) Adding an event trigger to the control template triggers
2) Adding an event trigger to the style triggers
3) Adding an event trigger to the button triggers
Am I writing the event trigger incorrectly? I've added the code for the three attempts below - hoping I've just missed something obvious and is a quick fix. Thanks!
1 - Adding an event trigger to the control template triggers
<Button x:Name="ResetButton"
Margin="0,0,20,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Command="{Binding Path=DoClearCmd}"
ToolTip="Reset all search criteria.">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text=" Reset" />
<Image Width="16"
Height="16"
Margin="2,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center" Source="..\Resources\Delete_16x16.png" />
</StackPanel>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<DoubleAnimation Storyboard.TargetProperty="BorderThickness" To="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
2 - Adding an event trigger to the style triggers
<Button x:Name="ResetButton"
Margin="0,0,20,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Command="{Binding Path=DoClearCmd}"
ToolTip="Reset all search criteria.">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text=" Reset" />
<Image Width="16"
Height="16"
Margin="2,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="..\Resources\Delete_16x16.png" />
</StackPanel>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<DoubleAnimation Storyboard.TargetProperty="BorderThickness" To="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
3 - Adding an event trigger to the button triggers
<Button x:Name="ResetButton"
Margin="0,0,20,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Command="{Binding Path=DoClearCmd}"
ToolTip="Reset all search criteria.">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text=" Reset" />
<Image Width="16"
Height="16"
Margin="2,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="..\Resources\Delete_16x16.png" />
</StackPanel>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseUp">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetName="ResetButton" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<DoubleAnimation Storyboard.TargetName="ResetButton" Storyboard.TargetProperty="BorderThickness" To="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
To animate Thickness, you have to use ThicknessAnimation
Button does not fire MouseLeftButtonUp routed event. Workaround is to use PreviewMouseLeftButtonUp event. Source
You have to bind your "Border" element properties BorderBrush and BorderThickness to your template.
For your first case:
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
NOTE that MouseUp is firing only for Right mouse button up
Hope, it helps
The reason why these methods don't work is because the MouseUp event is consumed by the button, and never gets to your handler. This can be demonstrated by a right click (which isn't consumed) instead of a left click, and your above code will work (I only tested the first sample).
To solve this you can use use the PreviewMouseUp event instead. This worked for me in your first sample.
I have a DatagridCheckBoxColumn is ReadOnly="true" but if i style the CheckBox using the Style
<WPFToolkit:DataGridCheckBoxColumn.ElementStyle>
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type CheckBox}}"></Style>
</WPFToolkit:DataGridCheckBoxColumn.ElementStyle>
Where CheckBox Default style is
<Style TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
<Setter Property="Foreground" Value="{StaticResource OutsideFontColor}" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Padding" Value="4,1,0,0" />
<Setter Property="Template" Value="{DynamicResource CheckBoxTemplate}" />
</Style>
<ControlTemplate x:Key="CheckBoxTemplate"
TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<Storyboard x:Key="PressedOn">
<ColorAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
To="#FFF28A27" />
<ColorAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
To="#FFF4D9BE" />
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BackgroundFill"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
<Storyboard x:Key="PressedOff">
<ColorAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
To="#FFFDDA81" />
<ColorAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
To="#FFFCE7AF" />
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="0" />
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BackgroundFill"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<Storyboard x:Key="DisabledOn">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="DisabledVisualElement"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOn">
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxPress"
Storyboard.TargetProperty="Opacity"
To="1" />
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOff">
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxPress"
Storyboard.TargetProperty="Opacity"
To="0" />
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.4000000"
Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="IndeterminateOn">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="IndeterminateIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="IndeterminateOff">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="IndeterminateIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FocusedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusedVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FocusedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusedVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid>
<Rectangle x:Name="Background"
Width="13"
Height="13"
Margin="1"
Fill="{DynamicResource CheckBoxBackgroundBrush}"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource CheckBoxBorderBrush}"
StrokeThickness="1" />
<Rectangle x:Name="BoxFill"
Width="9"
Height="9"
Fill="{DynamicResource CheckBoxInnerBoxBackgroundBrush}"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource CheckBoxInnerBoxBorderBrush}"
StrokeThickness="1" />
<Rectangle x:Name="BackgroundFill"
Width="13"
Height="13"
Margin="1"
Fill="{DynamicResource CheckBoxBackgroundFillBrush}"
Opacity="0"
RadiusX="0"
RadiusY="0"
Stroke="#FF5577A3"
StrokeThickness="1" />
<Rectangle x:Name="BoxOver"
Width="9"
Height="9"
Margin="3"
Fill="{DynamicResource CheckBoxMouseOverBrush}"
Opacity="0"
RadiusX="0"
RadiusY="0"
StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0.886,0.808" EndPoint="0.055,0.119">
<GradientStop Color="#FFFCE7AF" />
<GradientStop Offset="1" Color="#FFFDDA81" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="BoxPress"
Width="9"
Height="9"
Margin="3"
Opacity="0"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource CheckBoxPressBorderBrush}"
StrokeThickness="1" />
<Rectangle x:Name="BoxGradient"
Width="7"
Height="7"
Fill="{DynamicResource CheckBoxInnerBoxGradientBrush}"
RadiusX="0"
RadiusY="0"
StrokeThickness="1" />
<Rectangle x:Name="IndeterminateIcon"
Width="5"
Height="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{DynamicResource GlyphBrush}"
Visibility="Collapsed" />
<Path x:Name="CheckIcon"
Width="7"
Height="9"
Margin="0,3.333,3.833,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Data="M103.78572,598.96112 L105.09846,597.5661 L107.00806,600.16229 C107.00806,600.16229 109.91004,592.74463 109.91004,592.74463 C109.91004,592.74463 111.74678,593.79761 111.74678,593.79761 C111.74678,593.79761 107.88566,602.75848 107.88566,602.75848 L106.60118,602.75848 z"
Fill="{DynamicResource GlyphBrush}"
Stretch="Fill"
Visibility="Collapsed" />
<Rectangle x:Name="FocusedVisualElement"
Opacity="0"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource FocusBrush}"
StrokeThickness="1" />
<Rectangle x:Name="DisabledVisualElement"
Margin="1"
Fill="{DynamicResource DisabledBackgroundBrush}"
RadiusX="0"
RadiusY="0"
Visibility="Collapsed" />
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter x:Name="contentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="FocusedOff_BeginStoryboard"
Storyboard="{StaticResource FocusedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="FocusedOn_BeginStoryboard"
Storyboard="{StaticResource FocusedOn}" />
</Trigger.EnterActions>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True" />
<Condition Property="IsThreeState" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard x:Name="CheckedOff_BeginStoryboard"
Storyboard="{StaticResource CheckedOff}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard"
Storyboard="{StaticResource CheckedOn}" />
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="{x:Null}" />
<Condition Property="IsThreeState" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource IndeterminateOn}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource IndeterminateOff}" />
</MultiTrigger.ExitActions>
<Setter TargetName="CheckIcon" Property="Opacity" Value="0" />
</MultiTrigger>
<Trigger Property="IsChecked" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard2"
Storyboard="{StaticResource CheckedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard1"
Storyboard="{StaticResource CheckedOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource PressedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource PressedOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource DisabledOn}" />
</Trigger.EnterActions>
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="CheckBoxFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="15,0,0,0"
Stroke="#60000000"
StrokeDashArray="1 2"
StrokeThickness="1" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
then the CheckBox is no longer readonly... you can check or uncheck it
I dont know is it a bug or what....
Any help in this regrad would be greatful
I am guessing that since you're overwritting the template, the IsReadOnly property isn't getting applied.
Try setting IsReadOnly="{TemplateBinding IsReadOnly}" in your Control Template
Been trying to make a tabcontrol with some animation when changing tabs but it keeps giving me grief and refusing to let me put the animation in any useful place unless it's in the same XAML window file as the control itself (the style resides in a DLL file from which other styles work). Here's my style:
<Style x:Key="AnimatedTabControl" TargetType="{x:Type TabControl}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Background" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border>
<TabPanel
IsItemsHost="True">
</TabPanel>
</Border>
<Border BorderThickness="0"
Grid.Row="1"
BorderBrush="White"
Background="White">
<ContentPresenter x:Name="TabControlContent" ContentSource="SelectedContent" Margin="0" />
</Border>
</Grid>
<ControlTemplate.Resources>
<Storyboard x:Key="TabSelectionChangedStoryboard">
<DoubleAnimation Storyboard.TargetName="TabControlContent"
Storyboard.TargetProperty="Opacity"
To="100"
From="0"
FillBehavior="HoldEnd"
Duration="0:0:30.0" />
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="SelectionChanged">
<BeginStoryboard Storyboard="{StaticResource TabSelectionChangedStoryboard}" />
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This results in 'TabControlContent' name cannot be found in the name scope of 'System.Windows.Controls.ControlTemplate'
I've also tried to move the animation to the beginning of the file, which results in the same error. If I put it after the style, the storyboard can't find it. Is there any way around this?
Solution:
use Storyboard.Target instead of Storyboard.TargetName in combination with {Binding ElementName=TabControlContent.
replace
<DoubleAnimation
Storyboard.TargetName="TabControlContent"
Storyboard.TargetProperty="Opacity"
To="100"
From="0"
FillBehavior="HoldEnd"
Duration="0:0:30.0" />
with
<DoubleAnimation
Storyboard.Target="{Binding ElementName=TabControlContent}"
Storyboard.TargetProperty="Opacity"
To="100"
From="0"
FillBehavior="HoldEnd"
Duration="0:0:30.0" />
I search on web a lot but did not found appropriate answer... and after four days try Finally completed this way...
<ControlTemplate x:Key="GeneralButton" TargetType="{x:Type Button}">
<Grid>
<Border Background="{StaticResource ButtonGeneral}"
VerticalAlignment="Stretch" CornerRadius="6" HorizontalAlignment="Stretch"/>
<Border x:Name="BorderFocused" Opacity="0" Background="{StaticResource ButtonFocused}"
VerticalAlignment="Stretch" CornerRadius="6" HorizontalAlignment="Stretch"/>
<Border x:Name="BorderPressed" Opacity="0" Background="Purple"
VerticalAlignment="Stretch" CornerRadius="6" HorizontalAlignment="Stretch"/>
<Border x:Name="BorderDisabled" Opacity="0" Background="{StaticResource ButtonDisabled}"
VerticalAlignment="Stretch" CornerRadius="6" HorizontalAlignment="Stretch"/>
<ContentPresenter VerticalAlignment="Center"
HorizontalAlignment="Center" x:Name="MainContent" Margin="20,5" >
<TextElement.Foreground>
<SolidColorBrush Color="White"></SolidColorBrush>
</TextElement.Foreground>
<TextElement.FontSize>
16
</TextElement.FontSize>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderFocused" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.01"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderFocused" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderFocused" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.01"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderFocused" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderPressed" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.01"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderPressed" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderDisabled" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderDisabled" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I solved the problem using the "VisualStateManager", at the following link you will find a brief explanation of the differences between "VisualStateManager" and "Triggers".
https://stackoverflow.com/a/41030110/13037386
This shows how the graphic states are detached from triggers.