UWPでContentDialogをカスタマイズする

Question

私はContentDialogを持っています。これには、プライマリとセカンダリの2つのデフォルトボタンがあります 幅、高さ、位置、フォント、...またはいずれかのボタンが持つすべてのプロパティどうしたらいいですか？

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> 

あなたは、ダイアログの視覚的、行動やアニメーションを、コンテンツを完全に制御を持っているしたい場合は、作成イベントおよび要素を実装するカスタムUserControl。

あなたが別のコントロールを配置することができ、グリッドコントロールがある見ることができるように：

Answer 2

別の解決策は、あなたが最初にデフォルトボタンとイベントハンドラを削除することができるということです。ここにボタンを追加して、デザインをカスタマイズすることもできます。

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