在 UWP 中自定义 ContentDialog

Question

我有一个 ContentDialog，它有 2 个默认按钮：Primary 和 Secondary 我想改变它们的一些属性，比如宽度、高度、位置、字体……或者一个按钮的每个属性，我该怎么做？

Answer 1

您可以为ContentDialog创建自定义Style，默认模板在这里：https://msdn.microsoft.com/en-us/library/windows/apps/mt299120.aspx

<x:Double x:Key="ContentDialogMinWidth">320</x:Double>
<x:Double x:Key="ContentDialogMaxWidth">548</x:Double>
<x:Double x:Key="ContentDialogMinHeight">184</x:Double>
<x:Double x:Key="ContentDialogMaxHeight">756</x:Double>
<x:Double x:Key="ContentDialogButtonMinWidth">130</x:Double>
<x:Double x:Key="ContentDialogButtonMaxWidth">202</x:Double>
<x:Double x:Key="ContentDialogButtonHeight">32</x:Double>
<x:Double x:Key="ContentDialogTitleMaxHeight">56</x:Double>
<Thickness x:Key="ContentDialogBorderWidth">1</Thickness>
<Thickness x:Key="ContentDialogButton1HostMargin">24,0,0,24</Thickness>
<Thickness x:Key="ContentDialogButton2HostMargin">4,0,24,24</Thickness>
<Thickness x:Key="ContentDialogContentMargin">24,0,24,0</Thickness>
<Thickness x:Key="ContentDialogContentScrollViewerMargin">0,0,0,24</Thickness>
<Thickness x:Key="ContentDialogTitleMargin">24,18,24,0</Thickness>

<!-- Default style for Windows.UI.Xaml.Controls.ContentDialog -->
<Style TargetType="ContentDialog">
  <Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
  <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
  <Setter Property="HorizontalAlignment" Value="Center" />
  <Setter Property="VerticalAlignment" Value="Top" />
  <Setter Property="IsTabStop" Value="False" />
  <Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
  <Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
  <Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
  <Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ContentDialog">
        <Border x:Name="Container">
          <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Border x:Name="BackgroundElement"
                    Background="{TemplateBinding Background}"
                    FlowDirection="{TemplateBinding FlowDirection}"
                    BorderThickness="{ThemeResource ContentDialogBorderWidth}"
                    BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
                    MaxWidth="{TemplateBinding MaxWidth}"
                    MaxHeight="{TemplateBinding MaxHeight}"
                    MinWidth="{TemplateBinding MinWidth}"
                    MinHeight="{TemplateBinding MinHeight}" >
              <Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
                <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <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="Auto" />
                    </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="Left"
                        VerticalAlignment="Top"
                        IsTabStop="False"
                        MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}" >
                      <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">
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                  </Grid.ColumnDefinitions>
                  <Border x:Name="Button1Host"
                      Margin="{ThemeResource ContentDialogButton1HostMargin}"
                      MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
                      MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
                      Height="{ThemeResource ContentDialogButtonHeight}"
                      HorizontalAlignment="Stretch" />
                  <Border x:Name="Button2Host"
                      Margin="{ThemeResource ContentDialogButton2HostMargin}"
                      MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
                      MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
                      Height="{ThemeResource ContentDialogButtonHeight}"
                      Grid.Column="1"
                      HorizontalAlignment="Stretch" />
                </Grid>
              </Grid>
            </Border>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

如果您想完全控制 Dialog 的内容、视觉效果、行为或动画，请创建一个自定义 UserControl 来实现事件和元素。

Answer 2

另一种解决方案是，您可以先删除默认按钮和事件处理程序：

如您所见，有一个 Grid 控件，您可以在其中放置不同的控件。您可以在此处添加按钮并自定义其设计。

<ContentDialog
x:Class="SampleApp.Windows10.SampleContentDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Grandler.Windows10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="TITLE">

 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Button x:Name="AcceptButton" Grid.Column="0" Content="Accept"/>
    <Button x:Name="CancelButton" Grid.Column="1" Content="Ignore"/>

 </Grid>
</ContentDialog>