[英]Toggle opacity of control
I have button, which should toggle Opacity
of element. 我有按钮,它应该切换元素的
Opacity
。 Currently it works only at half - on click make control visible( set opacity to 1). 目前,它仅工作一半-单击使控件可见(将不透明度设置为1)。 I've tried use
ToogleButton
instead of simple Button
to use properties IsChechecked
(I think it is the same as IsClicked
) but what I found wasn't good for me, cause for this properties I can't set TargetName
for animation. 我尝试使用
ToogleButton
而不是简单的Button
来使用属性IsChechecked
(我认为它与IsClicked
相同),但是我发现这对我IsClicked
,因为该属性无法为动画设置TargetName
。
<ToggleButton BorderThickness="0" Background="Transparent" Grid.Column="0" Padding="0" Grid.Row="0" Focusable="False" Width="Auto" PreviewMouseUp="Share_Click">
<ToggleButton.Content>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Margin="0,0,6,0" Grid.Column="0" Text="Filter" Foreground="#FFC0B6D1" FontFamily="Segoe UI Semibold" FontSize="14" />
<Image Grid.Column="1" Margin="0,4,0,0" VerticalAlignment="Center" Height="6" Width="12" Name="FiltersToggleArrow" Style="{StaticResource ToogleFilters}"/>
</Grid>
</ToggleButton.Content>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="UIElement.PreviewMouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0:0:0.00" Storyboard.TargetName="FiltersPanel" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:00.2" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
The MSDN documentation says: MSDN文档说:
You can set this property to the name of any element within the scope of where the setter collection (the collection that this setter is part of) is applied.
您可以将此属性设置为应用setter集合(此setter所属的集合)的范围内的任何元素的名称。 This is typically a named element that is within the template that contains this setter.
这通常是包含此setter的模板内的命名元素。
To get around this, you can instead apply your Storyboard
inside the Style
of your Panel
, not the ToggleButton
. 要解决此问题,您可以改为在
Panel
的Style
而不是ToggleButton
应用Storyboard
。 In this case, you can use a DataTrigger
to bind to the IsChecked
property and act accordingly. 在这种情况下,可以使用
DataTrigger
绑定到IsChecked
属性并采取相应的措施。
Here's an example I did with a ToggleButton
and a Rectangle
. 这是我使用
ToggleButton
和Rectangle
所做的示例。
<ToggleButton Content="Switch" Name="chk"/>
<Rectangle Fill="Red" Name="rect"
Width="50" Height="50">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=chk}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard
Storyboard.TargetProperty="Opacity">
<DoubleAnimation From="1"
To="0"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard
Storyboard.TargetProperty="Opacity">
<DoubleAnimation From="0"
To="1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
From my experience with triggers, they can be a royal pain in the backside and are tricky to get right. 根据我在扳机上的经验,它们可能会在背面造成皇家痛苦,并且很难正确操作。 That being said, this example should be enough to fit your requirements.
话虽如此,这个例子应该足以满足您的要求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.