Windows 10 UWP erhalten Inhalt Dialog vertikal auf Bildschirm in der Mitte zu zentrieren

Question

Ich verwende ContentDialogs in meiner gesamten App auf Windows 10 Mobile. Sowohl ContentDialog als auch MessageDialog scheinen standardmäßig am oberen Bildschirmrand zu verankern. Ich habe jedoch einige Apps gesehen, die vertikal in der Mitte des Bildschirms angezeigt werden, sodass sie als Streifen erscheinen. Ich kann nicht herausfinden, wie man es in der Mitte vertikal positioniert. Ich habe es versucht

cd.VerticalAlignment = VerticalAlignment.Center; 

Wo CD mein ContentDialog ist, aber dies funktioniert nicht. Es ist immer noch oben im Fenster verankert.

Danke!

Answer 1

Sie sollten Style für Ihre ContentDialog überschreiben. Ich habe versucht, VerticalAlignment.Center zu Container, LayoutRoot und BackgroundElement einzurichten, aber es hilft nicht. Also, platzieren Sie die BackgroundElement in der Mitte Reihe in LayoutRoot gerade hinzugefügt neue RowDefinition und Setup Grid.Row="1" für Ihre BackgroundElement.

<Grid.RowDefinitions> 
    <RowDefinition Height="*" /> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition Height="*" /> 
</Grid.RowDefinitions> 

Schauen Sie sich den vollständigen ContentDialog Style an.

NOTES

Aber Vorsicht, da dies nur für mobile funktioniert. Sie sollten diesen Stil nur für mobile Plattformen anwenden.

<ContentDialog.Style> 
    <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="*" /> 
           <RowDefinition Height="Auto" /> 
           <RowDefinition Height="*" /> 
          </Grid.RowDefinitions> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto" /> 
          </Grid.ColumnDefinitions> 
          <Border x:Name="BackgroundElement" 
            Grid.Row="1" 
            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> 
</ContentDialog.Style>