CODEWITHSUNDEEP
xamlcontroltemplatewinui-3
Hulabuli
Hulabuli

Reputation: 33

WinUI 3. Set part of Button content in xaml style

I'm currently trying to fulfill my UX designers wishes for the design of a button.

The goal is to change the style of a button to always contain a fixed graphic on the right side, and have it so when the buttons content is set, it modifies the remaining space on the left. Ideally this graphic also is required to slightly change its background colour while pressed.

Currently i'm attempting this by modifying a copy of the default buttons style.

<Style x:Key="PopUpButton" TargetType="Button">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <!-- Other setters needed for the Button -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="PointerOver" />

                            <VisualState x:Name="Pressed">

                                <Storyboard>
                                    <!-- Animation Targeting background of static graphic -->
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="#D5DEEB}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    -->
                                </Storyboard>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{StaticResource AppBarEllipsisButtonInnerBorderMargin}" Padding="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" Control.IsTemplateFocusTarget="True" />

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <!-- Where i want content to appear --> 
                    <Grid Grid.Column="0" Content = "{TemplateBinding Content}"/>

                    <!-- Where i want the static content located -->
                    <Border Grid.Column="1" Background="#F2F5FA">
                        <TextBlock Text = ">"/>
                    </Border>

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

I'm aware of the following reasons for why this solution doesn't work:

I also considered the following:

<Setter Property="Content">
    <Setter.Value>
        <Grid>
            <!-- Static content here -->
        </Grid>
    </Setter.Value>
</Setter>

However this would be replaced whenever I'd try to add a text to the button, as I'd be overruling this setter.

I'd love if love any help with my problem, I do however relize that what i want might not bi possible, and I'd need to use a Custom-Control or User-Control for this, this does feel a bit like reinventing the wheel tho.

Upvotes: 0

Views: 1379

Answers (1)

Batesias
Batesias

Reputation: 2146

The Content of your button must be displayed using the ContentPresenter (which is already in your ControlTemplate), not a new Grid.

Make sure you use TemplateBinding for both the Content and ContentTemplate properties.

(...)
</VisualStateManager.VisualStateGroups>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

<!-- Where i want content to appear --> 
<ContentPresenter x:Name="ContentPresenter"
                  Grid.Column="0"
                  Content="{TemplateBinding Content}"
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  (...)
                  />

<!-- Where i want the static content located -->
<Border Grid.Column="1" Background="#F2F5FA">
    <TextBlock Text = ">"/>
</Border>
(...)

If you want a more complete (but also more complex) example, you can find a similar Button style here that also shows the button content next to an icon.

Upvotes: 0

Related Questions