Пользовательский динамический размер wpf кнопка с анимацией - PullRequest
Новая
       10

Пользовательский динамический размер wpf кнопка с анимацией

0 голосов
/ 08 мая 2018

Я пытаюсь научиться стайлингу wpf с помощью шаблонов управления, сделав настраиваемую кнопку переключения для удовольствия и прибыли, а теперь и некоторые головные боли. Моя идея состоит в том, чтобы сделать простую кнопку переключения, которая при нажатии будет анимировать маленький треугольник сверху вниз. Я должен добавить, что я достаточно новичок в wpf и не знаю всех хитрых трюков, которые вы можете сделать с wpf, поэтому, если мой способ сделать это совершенно неверен, то я открыт для всего, что может помочь и улучшить мое понимание МОФ.

Это вопрос из трех частей, так что вот оно:

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>

Я надеюсь, что это не слишком долго и, по крайней мере, имеет смысл, любая помощь приветствуется. Спасибо!

...