2016-04-07 26 views
0

Bir ContentDialog'um var, 2 varsayılan düğmeli var: Birincil ve İkincil Bir düğmenin genişliği, yüksekliği, konumu, yazı tipi, ... veya her özellik gibi özelliklerini değiştirmek istiyorum , Nasıl yapabilirim?UWP'de ContentDialog özelleştirme

Sen ContentDialog için özel bir Style oluşturabilir

cevap

1

, varsayılan şablon buradadır: 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> 

içerik Dialog, görsel, davranış veya animasyon üzerinde tam kontrole sahip olmak istiyorsanız, bir oluşturmak Olayları ve öğeleri uygulayan özel UserControl.

0

Başka bir çözüm size öncelikle varsayılan düğmeler ve olay işleyicileri kaldırabilirsiniz şudur:

enter image description here

Eğer farklı kontrollerini yerleştirebilirsiniz bir kılavuz denetimi vardır görebileceğiniz gibi. Düğmelerinizi buraya ekleyebilir ve tasarımlarını özelleştirebilirsiniz.

enter image description here

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