Пользовательский стиль UWP для кнопки со значком и текстом - PullRequest
Новая
       103

Пользовательский стиль UWP для кнопки со значком и текстом

0 голосов
/ 03 мая 2020

У меня есть пользовательская кнопка ToggleButton, которая содержит значок и текст. В конце я хочу использовать этот стиль для разных кнопок, каждая с разным текстом и значком 

<Style TargetType="ToggleButton" x:Key="CustomButton">
    <Setter Property="Width" Value="180"/>
    <Setter Property="Height" Value="90"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Foreground" Value="Gray"/>
    <Setter Property="Content" Value="hola"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Texto">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Texto">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Texto">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ButtonBackground" BorderBrush="Gray" BorderThickness="{TemplateBinding BorderThickness}" Background="Gray" CornerRadius="15">
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}"  Foreground="LightGray" HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                        <iconPacks:PackIconMaterial Margin="0,0,10,0" x:Name="Icono" Kind="AccountPlus" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#B8B8B8" Width="24" Height="24"/>
                        <TextBlock x:Name="Texto" Margin="0,5,0,0" Text="{TemplateBinding Content}"/>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

И xaml вот так 

<ToggleButton x:Name="BotonUsuarioNuevo"
              HorizontalAlignment="Center"
              Margin="0,30,0,20"
              Content="New User"
              Style="{StaticResource CustomButton}"/>

Дело в том, что я могу ' Не найти способ передать значок «Добрый» в xaml, чтобы стиль можно было многократно использовать.

Есть мысли ??

Ура !!!

1 Ответ

0 голосов
/ 03 мая 2020

ToggleButton не предоставляет Icon свойство, поэтому вы не можете передать Icon свойство напрямую. Один из способов - использовать вместо него AppBarToggleButton. 

<AppBarToggleButton x:Name="toggleBtn" Icon="UnFavorite" Label="UnFavorite"/>

Другим является то, что вам нужно написать пользовательское свойство ToggleButton Content. 

<ToggleButton>
    <StackPanel>
        <SymbolIcon Symbol="Admin"/>
        <TextBlock Text="Admin"/>
    </StackPanel>
</ToggleButton>

Третий метод - написать собственный пользовательский элемент управления, который содержит Icon элемент управления или класс, производный от Button class.

...