ContentDialog styles and templates
TOC
Collapse the table of content
Expand the table of content

ContentDialog styles and templates

[ Updated for UWP apps on Windows 10. For Windows 8.x articles, see the archive ]

This topic describes the default style and template for the ContentDialog control. You can modify these resources and the default ControlTemplate to give the control a unique appearance.

Note   These styles and resources are based on the Windows Software Development Kit (SDK) for Windows 10, Version 1511 (Windows SDK version 10.0.10586.0). Styles and resources from other versions of the SDK might have different values. For design purposes, generic.xaml is available in the \(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic folder from a Windows SDK installation.
 

Visual states

The default style for ContentDialog doesn't define any visual states.

Theme resources

These resources are used in the control's default style. For more info about theme resources and the brushes used in the default style, see XAML theme resources.


<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


<!-- 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>


Related topics

Styling controls
Control templates

 

 

Show:
© 2018 Microsoft