Question

我正在尝试学习如何使用控件模板进行wpf样式设置，通过自定义切换按钮获得乐趣和利润，现在也有些令人头疼。我的想法是制作一个简单的切换按钮，点击该按钮可以从顶部向下设置一个小三角形。我应该补充一点，我对wpf来说相当新，我不知道你可以用wpf做的所有巧妙的技巧，所以如果我这样做的方式是完全错误的，那么我愿意接受任何有助于提高我的理解的东西。 WPF。

这是一个3部分问题，所以在这里：

no.1我遇到的一个问题是，当检查的值发生变化时，我无法弄清楚如何触发动画，然后能够根据检查值的状态决定显示哪个动画。我现在所做的只是改变了不透明度。

no.2我倾向于面对翻译动画的另一个问题是，当控件可以调整大小并且你想通过使用margin属性来移动控件时，你可以从动画中得到不好的结果。在这种情况下，当应该从按钮上方进入时，第三个按钮几乎不会向下移动三角形。有没有办法将边距的一边绑定到控件的高度减去10？这样在动画之前总是会略微偏离屏幕

no.3如果您运行了代码，您会注意到三角形向下动画但在实际按钮之外仍然可见。我不知道如何制作三角形只能从按钮边框内看到。

窗口上的前端xaml

<StackPanel>
    <TextBlock Text="Base_SwapIconButton"/>
    <StackPanel Orientation="Horizontal">
        <StackPanel Width="100" Height="200">
            <TextBlock Text="small" TextAlignment="Center"/>
            <Border Margin="0,10,0,0" Width="100" Height="160">
                <ToggleButton Width="40" Height="40" Template="{StaticResource Base_SwapIconButton}"/>
            </Border>
        </StackPanel>

        <StackPanel Width="100" Height="200">
            <TextBlock Text="medium" TextAlignment="Center"/>
            <Border Margin="0,10,0,0" Width="100" Height="160">
                <ToggleButton Width="80" Height="80" Template="{StaticResource Base_SwapIconButton}"/>
            </Border>
        </StackPanel>

        <StackPanel Width="200" Height="200">
            <TextBlock Text="large" TextAlignment="Center"/>
            <Border Margin="0,10,0,0" Width="160" Height="160">
                <ToggleButton Width="160" Height="160" Template="{StaticResource Base_SwapIconButton}" Content="button" />
            </Border>
        </StackPanel>
    </StackPanel>
</StackPanel>

资源模板

<ControlTemplate x:Key="Base_SwapIconButton" TargetType="{x:Type ToggleButton}">

    <!--background and icon-->
    <Border x:Name="back" Background="#969696" CornerRadius="10">
        <Grid>
            <Ellipse x:Name="icon" Margin="8" Fill="#97FFFF"/>
            <Polygon x:Name="iconTri" Points="0,0 3,0 1.5,2.5" Stroke="Red" Fill="Red" Stretch="Uniform" Margin="5,10,5,5"/>
        </Grid>
    </Border>

    <!--Triggers-->
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter TargetName="icon" Property="Opacity" Value="0"/>
            <Setter TargetName="iconTri" Property="Opacity" Value="1"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <Setter TargetName="icon" Property="Opacity" Value="1"/>
            <Setter TargetName="iconTri" Property="Opacity" Value="0"/>
        </Trigger>

        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="back" Duration="0:0:.1"
                        Storyboard.TargetProperty="Background.Color" To="#46328C"  />
                    <ColorAnimation Storyboard.TargetName="back" BeginTime="0:0:.1" Duration="0:0:.4" 
                        Storyboard.TargetProperty="Background.Color" To="#646464"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

我希望这不会太长，至少是有道理的，欢迎任何和所有的帮助。谢谢！

带动画的自定义动态大小的wpf按钮

0 个答案: