XAML UWP ContentDialog自定义标题Horizo​​ntalAlignment =拉伸?

时间:2020-09-18 07:55:36

标签: xaml uwp uwp-xaml

我想在我的ContentDialog的标题中添加一个帮助按钮...类似这样:

<ContentDialog.Title >
   <Grid HorizontalAlignment="Stretch">

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

      <TextBlock Text="Dialog Title..."/>

      <Button Grid.Column="1">
         <SymbolIcon Symbol="Help"/>
      </Button>

   </Grid>
<ContentDialog.Title >

唯一的缺陷是标题总是左对齐,而不是延伸。

如何获得标题容器的样式来告诉它伸展?

1 个答案:

答案 0 :(得分:0)

如何获得标题容器的样式来告诉它伸展

您可以在 generic.xaml 文件中找到ContentDialog的默认样式,我将在下面复制该样式。您只需要找到ContentControl x:Name="Title"并将“ Horizo​​ntalAlignment”属性编辑为Stretch

<Application.Resources>
    <Style TargetType="ContentDialog" x:Key="TestDialog">
            <Setter Property="Foreground" Value="{ThemeResource ContentDialogForeground}" />
            <Setter Property="Background" Value="{ThemeResource ContentDialogBackground}" />
            <Setter Property="BorderBrush" Value="{ThemeResource ContentDialogBorderBrush}" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ContentDialog">
                        <Border x:Name="Container">

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="DialogShowingStates">

                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="DialogHidden">

                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="IsHitTestVisible">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.05" />
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.05" />
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                                    <LinearDoubleKeyFrame KeyTime="0:0:0.083" Value="0.0" />
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualTransition>
                                        <VisualTransition To="DialogShowing">

                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.0" />
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.0" />
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
                                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
                                                    <LinearDoubleKeyFrame KeyTime="0:0:0.167" Value="1.0" />
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="DialogHidden" />
                                    <VisualState x:Name="DialogShowing">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.Visibility" Value="Visible" />
                                            <Setter Target="BackgroundElement.TabFocusNavigation" Value="Cycle" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="DialogShowingWithoutSmokeLayer">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.Visibility" Value="Visible" />
                                            <Setter Target="LayoutRoot.Background" Value="{x:Null}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DialogSizingStates">
                                    <VisualState x:Name="DefaultDialogSizing" />
                                    <VisualState x:Name="FullDialogSizing">
                                        <VisualState.Setters>
                                            <Setter Target="BackgroundElement.VerticalAlignment" Value="Stretch" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ButtonsVisibilityStates">
                                    <VisualState x:Name="AllVisible" />
                                    <VisualState x:Name="NoneVisible">
                                        <VisualState.Setters>
                                            <Setter Target="CommandSpace.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PrimaryVisible">
                                        <VisualState.Setters>
                                            <Setter Target="PrimaryButton.(Grid.Column)" Value="2" />
                                            <Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="PrimaryButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
                                            <Setter Target="CloseButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="SecondaryVisible">
                                        <VisualState.Setters>
                                            <Setter Target="SecondaryButton.(Grid.Column)" Value="2" />
                                            <Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="SecondaryButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
                                            <Setter Target="CloseButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="CloseVisible">
                                        <VisualState.Setters>
                                            <Setter Target="CloseButton.(Grid.Column)" Value="2" />
                                            <Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="CloseButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
                                            <Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PrimaryAndSecondaryVisible">
                                        <VisualState.Setters>
                                            <Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="SecondaryButton.(Grid.Column)" Value="2" />
                                            <Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="SecondaryButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="CloseButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PrimaryAndCloseVisible">
                                        <VisualState.Setters>
                                            <Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="CloseButton.(Grid.Column)" Value="2" />
                                            <Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="CloseButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="SecondaryAndCloseVisible">
                                        <VisualState.Setters>
                                            <Setter Target="SecondaryButton.(Grid.Column)" Value="0" />
                                            <Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="SecondaryButton.Margin" Value="0,0,2,0" />
                                            <Setter Target="CloseButton.(Grid.Column)" Value="2" />
                                            <Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
                                            <Setter Target="CloseButton.Margin" Value="2,0,0,0" />
                                            <Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DefaultButtonStates">
                                    <VisualState x:Name="NoDefaultButton" />
                                    <VisualState x:Name="PrimaryAsDefaultButton">
                                        <VisualState.Setters>
                                            <Setter Target="PrimaryButton.Style" Value="{StaticResource AccentButtonStyle}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="SecondaryAsDefaultButton">
                                        <VisualState.Setters>
                                            <Setter Target="SecondaryButton.Style" Value="{StaticResource AccentButtonStyle}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="CloseAsDefaultButton">
                                        <VisualState.Setters>
                                            <Setter Target="CloseButton.Style" Value="{StaticResource AccentButtonStyle}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DialogBorderStates">
                                    <VisualState x:Name="NoBorder" />
                                    <VisualState x:Name="AccentColorBorder">
                                        <VisualState.Setters>
                                            <Setter Target="BackgroundElement.BorderBrush" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="LayoutRoot" Visibility="Collapsed" Background="{ThemeResource SystemControlPageBackgroundMediumAltMediumBrush}">
                                <Border x:Name="BackgroundElement"
                  Background="{TemplateBinding Background}"
                  FlowDirection="{TemplateBinding FlowDirection}"
                  BorderThickness="{ThemeResource ContentDialogBorderWidth}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  CornerRadius="{TemplateBinding CornerRadius}"
                  MinWidth="{ThemeResource ContentDialogMinWidth}"
                  MaxWidth="{ThemeResource ContentDialogMaxWidth}"
                  MinHeight="{ThemeResource ContentDialogMinHeight}"
                  MaxHeight="{ThemeResource ContentDialogMaxHeight}"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <ScaleTransform x:Name="ScaleTransform" />
                                    </Border.RenderTransform>
                                    <Grid x:Name="DialogSpace" Padding="{ThemeResource ContentDialogPadding}">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <ScrollViewer x:Name="ContentScrollViewer"
                      HorizontalScrollBarVisibility="Disabled"
                      VerticalScrollBarVisibility="Disabled"
                      ZoomMode="Disabled"
                      Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
                      IsTabStop="False">
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="*" />
                                                </Grid.RowDefinitions>
                                                <ContentControl x:Name="Title"
                          Margin="{ThemeResource ContentDialogTitleMargin}"
                          Content="{TemplateBinding Title}"
                          ContentTemplate="{TemplateBinding TitleTemplate}"
                          FontSize="20"
                          FontFamily="XamlAutoFontFamily"
                          FontWeight="Normal"
                          Foreground="{TemplateBinding Foreground}"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Top"
                          IsTabStop="False">
                                                    <ContentControl.Template>
                                                        <ControlTemplate TargetType="ContentControl">
                                                            <ContentPresenter Content="{TemplateBinding Content}"
                                MaxLines="2"
                                TextWrapping="Wrap"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Margin="{TemplateBinding Padding}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                        </ControlTemplate>
                                                    </ContentControl.Template>
                                                </ContentControl>
                                                <ContentPresenter x:Name="Content"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          Content="{TemplateBinding Content}"
                          FontSize="{ThemeResource ControlContentThemeFontSize}"
                          FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                          Margin="{ThemeResource ContentDialogContentMargin}"
                          Foreground="{TemplateBinding Foreground}"
                          Grid.Row="1"
                          TextWrapping="Wrap" />
                                            </Grid>
                                        </ScrollViewer>
                                        <Grid x:Name="CommandSpace"
                      Grid.Row="1"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Bottom"
                      XYFocusKeyboardNavigation="Enabled"
                      Margin="{ThemeResource ContentDialogCommandSpaceMargin}">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition />
                                                <ColumnDefinition Width="0.5*" />
                                                <ColumnDefinition Width="0.5*" />
                                                <ColumnDefinition />
                                            </Grid.ColumnDefinitions>
                                            <Button x:Name="PrimaryButton"
                        Content="{TemplateBinding PrimaryButtonText}"
                        IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}"
                        Style="{TemplateBinding PrimaryButtonStyle}"
                        ElementSoundMode="FocusOnly"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Margin="0,0,2,0"
                        Grid.Column="0" />
                                            <Button x:Name="SecondaryButton"
                        Content="{TemplateBinding SecondaryButtonText}"
                        IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}"
                        Style="{TemplateBinding SecondaryButtonStyle}"
                        ElementSoundMode="FocusOnly"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Margin="2,0,2,0"
                        Grid.Column="1"
                        Grid.ColumnSpan="2" />
                                            <Button x:Name="CloseButton"
                        Content="{TemplateBinding CloseButtonText}"
                        Style="{TemplateBinding CloseButtonStyle}"
                        ElementSoundMode="FocusOnly"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Margin="2,0,0,0"
                        Grid.Column="3" />
                                        </Grid>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</Application.Resources>

用法

<ContentDialog Style="{StaticResource TestDialog}"/>

更新

请在上面找到标题,并替换以下内容( HorizontalContentAlignment="Stretch"修改Horizo​​ntalAlignment为Stretch )

<ContentControl
    x:Name="Title"
    Margin="{ThemeResource ContentDialogTitleMargin}"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Top"
    HorizontalContentAlignment="Stretch"
    Content="{TemplateBinding Title}"
    ContentTemplate="{TemplateBinding TitleTemplate}"
    FontFamily="XamlAutoFontFamily"
    FontSize="20"
    FontWeight="Normal"
    Foreground="{TemplateBinding Foreground}"
    IsTabStop="False">
    <ContentControl.Template>
        <ControlTemplate TargetType="ContentControl">
            <ContentPresenter
                Margin="{TemplateBinding Padding}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                Content="{TemplateBinding Content}"
                ContentTemplate="{TemplateBinding ContentTemplate}"
                ContentTransitions="{TemplateBinding ContentTransitions}"
                MaxLines="2"
                TextWrapping="Wrap" />
        </ControlTemplate>
    </ContentControl.Template>
</ContentControl>

用法

<ContentDialog.Title>
    <Grid HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="Dialog Title..." />
        <Button Grid.Column="1">
            <SymbolIcon Symbol="Help" />
        </Button>
    </Grid>
</ContentDialog.Title>

这是您可以参考的code sample