Windows 10 UWPのコンテンツダイアログを画面中央に垂直にモバイルで表示

Question

私はWindows Mobile上でアプリケーション全体でContentDialogsを使用しています。 ContentDialogとMessageDialogの両方は、デフォルトでは画面上部にアンカーするほうが好きです。しかし、私はそれがストリップのように見えるので、画面の真ん中に右に表示されるいくつかのアプリを見てきました。私はそれを垂直に真ん中に置く方法を理解できません。私はこれを試しました

cd.VerticalAlignment = VerticalAlignment.Center; 

ここで、cdは私のContentDialog intanceですが、これは動作しません。それはまだウィンドウの上部に固定されています。

ありがとうございます！

Answer 1

ContentDialogの場合は、Styleを上書きする必要があります。私はVerticalAlignment.CenterをContainerに、LayoutRootとBackgroundElementに設定しようとしましたが、それは役に立ちません。したがって、BackgroundElementをLayoutRootの中に挿入して、新しいRowDefinitionを追加し、BackgroundElementにGrid.Row="1"を設定してください。

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

完全なContentDialogスタイルを見てください。

NOTES

しかし、これはモバイルのみ動作しますので、注意してください。このスタイルはモバイルプラットフォームにのみ適用する必要があります。

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