切换按钮和所有按钮模板

Question

希望你一切都好

所以我今天的问题是，我目前正在制作一个带有 Hamburger Menu 的家庭仪表板，但是在尝试、应用和调整大约 15 个不同的模板之后，我正式不知所措。

我正在尝试制作一个切换按钮模板，tgMenu，它会在 checked/unchecked 时触发菜单滑出和滑回。

我正在尝试创建通用模板，以便我可以将它应用到其他地方和其他项目，但我似乎无法获得从我的图像列表中编辑图像的按钮 select，AppIconsImageList，当我稍后调用按钮时，我可以在需要时 select 不同的图像。同样，我需要对普通按钮执行相同的操作。

下面是我目前的代码：

<Window.Resources>
        <!-- menu button template-->
        <Style x:Key="tgMenu" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border x:Name="border"
                                Height="40"
                                Width="40"                                
                                HorizontalAlignment="Center"
                                Background="{TemplateBinding Image.Source}"
                                SnapsToDevicePixels="true">
                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true"/>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="ToggleButton.IsMouseOver" Value="True" />
                                </MultiTrigger.Conditions>

                                <MultiTrigger.EnterActions>
                                    <BeginStoryboard x:Name="Start_Uppercase_Indicator">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="crdMenu"
                                                             Storyboard.TargetProperty="Width"
                                                             DecelerationRatio="0.6"
                                                             From="70" To="320"
                                                             Duration="0:0:1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                    <RemoveStoryboard BeginStoryboardName="Stop_Indicator" />
                                </MultiTrigger.EnterActions>

                                <MultiTrigger.ExitActions>
                                    <BeginStoryboard x:Name="Stop_Uppercase_Indicator">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="crdMenu"
                                                             Storyboard.TargetProperty="Width"
                                                             DecelerationRatio="0.6"
                                                             From="320" To="70"
                                                             Duration="0:0:1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                    <RemoveStoryboard BeginStoryboardName="Release_Indicator" />
                                </MultiTrigger.ExitActions>

                            </MultiTrigger>

                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="ToggleButton.IsChecked" Value="True" />
                                </MultiTrigger.Conditions>

                                <MultiTrigger.EnterActions>
                                    <BeginStoryboard x:Name="Lock_Indicator">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="crdMenu"
                                                             Storyboard.TargetProperty="Width"
                                                             From="320" To="325"
                                                             Duration="0:0:0.3" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </MultiTrigger.EnterActions>

                                <MultiTrigger.ExitActions>
                                    <BeginStoryboard x:Name="Release_Indicator">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="crdMenu"
                                                             Storyboard.TargetProperty="Width"
                                                             From="325" To="320"
                                                             Duration="0:0:0.3" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                    <BeginStoryboard x:Name="Stop_Indicator">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="crdMenu"
                                                             Storyboard.TargetProperty="Width"
                                                             From="320" To="70"
                                                             BeginTime="0:0:0.5"
                                                             Duration="0:0:1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </MultiTrigger.ExitActions>
                            </MultiTrigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>

图像位于 Assets/ImageAssets/Images 中，图像列表是 Assets/ImageAssets/ImageLists/AppIconsImageList 然后我在实际的 WPF 代码中有以下内容：

<materialDesign:Card>
        <materialDesign:Card.Background>
            <LinearGradientBrush StartPoint="1.2,0" EndPoint="0,1">
                <GradientStop Color="#4f6299" Offset="0.0"/>
                <GradientStop Color="#041c62" Offset="0.63"/>
                <GradientStop Color="#000b29" Offset="1.0"/>
            </LinearGradientBrush>
        </materialDesign:Card.Background>

        <materialDesign:Card x:Name="crdMenu" Width="80" HorizontalAlignment="Left" 
                             Background="#FF1E1E1E" VerticalContentAlignment="Top" 
                             HorizontalContentAlignment="Center">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="15"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="15"/>
                </Grid.ColumnDefinitions>

                <ToggleButton Grid.Column="1" Grid.Row="1" 
                              x:Name="tgMenu" Style="{StaticResource tgMenu}">
                    <Image Source="{StaticResource }"/>
                </ToggleButton>
                
            </Grid>
        </materialDesign:Card>
    </materialDesign:Card>

我们将不胜感激任何帮助。

谢谢

Answer 1

您可以试试看下面的代码是否适合您。

<Window x:Class="ButtonsDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ButtonsDemo"
        mc:Ignorable="d"
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.Resources>
            <system:Double x:Key="SlideOffSet">130</system:Double>
            <Storyboard x:Key="SlideRight">
                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                             From="0" To="{StaticResource SlideOffSet}" Duration="0:0:0.3" />
            </Storyboard>
            <Storyboard x:Key="SlideLeft">
                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                              From="{StaticResource SlideOffSet}" To="0"   Duration="0:0:0.3" />
            </Storyboard>
            <Style x:Key="sp" TargetType="StackPanel">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=SlideState}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource SlideRight}" />
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard Storyboard="{StaticResource SlideLeft}" />
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Resources>

        <materialDesign:Card>
            <materialDesign:Card.Background>
                <LinearGradientBrush StartPoint="1.2,0" EndPoint="0,1">
                    <GradientStop Color="#4f6299" Offset="0.0"/>
                    <GradientStop Color="#041c62" Offset="0.63"/>
                    <GradientStop Color="#000b29" Offset="1.0"/>
                </LinearGradientBrush>
            </materialDesign:Card.Background>

            <materialDesign:Card x:Name="crdMenu" Width="80" HorizontalAlignment="Left" 
                             Background="#FF1E1E1E" VerticalContentAlignment="Top" 
                             HorizontalContentAlignment="Center">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="15"/>
                        <ColumnDefinition Width="50"/>
                        <ColumnDefinition Width="15"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="1" Grid.Row="1"   Orientation="Horizontal" Margin="0" Style="{StaticResource sp}">
                        <StackPanel.RenderTransform>
                            <TranslateTransform />
                        </StackPanel.RenderTransform>
                        <ToggleButton x:Name="SlideState" Margin="10,0,0,0" Height="40" Width="50"  >
                            <Image Width="50" Height="50" Source=" is.jfif"/>
                        </ToggleButton>
                       
                    </StackPanel>
                  
                </Grid>
            </materialDesign:Card>
        </materialDesign:Card>
    </Grid>
</Window>

切换按钮和所有按钮模板

Toggle Button and All Buttons Templating

c#

wpf

xaml

uibutton

visual-studio