UWP:ContentDialog大小和边距

时间:2018-04-25 20:47:15

标签: uwp dialog margin

我想要没有按钮/边距的内容对话框。

我在资源字典中使用了下一个代码(注意所有的0):

<x:Double x:Key="ContentDialogButtonHeight">0</x:Double>
<Thickness x:Key="ContentDialogButton1HostMargin">0,0,0,0</Thickness>
<Thickness x:Key="ContentDialogButton2HostMargin">0,0,0,0</Thickness>
<Thickness x:Key="ContentDialogContentMargin">0,0,0,0</Thickness>
<Thickness x:Key="ContentDialogContentScrollViewerMargin">0,0,0,0</Thickness>

如果我在XAML中设置内容对话框的宽度/高度,则底部被切断(如果不是,它将占据整个屏幕高度),如何修复它:

enter image description here

注意蓝色边距(对话框的背景是蓝色),如何删除它?

此外,对话框显示在顶部而不是位于中心。

内容是一个0填充/边距的网格。

2 个答案:

答案 0 :(得分:1)

在模板中使用MaxWidth和MaxHeight来控制对话框的大小,您还可以在模板中使用ScrollViewer并修复Height以创建可以滚动的固定高度内容对话框里面的内容。 要删除保证金,您还可以在此标记中更改模板:

<强> <Grid x:Name="DialogSpace">

这是我的对话框模板样式:

<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="0"
                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 Height="500">
                                                <!--added height: 500 -->
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="*" />
                                                    <!-- change from Auto to *-->
                                                </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="0,-17,0,0"
                    Foreground="{TemplateBinding Foreground}"
                    Grid.Row="1"
                    TextWrapping="Wrap"
                    VerticalAlignment="Center" />
                                                <!--added VerticalAlignment="Center"-->
                                            </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>

答案 1 :(得分:0)

基本上,问题在于在我的Styles.xaml中,MinWidth对于ContentDialog样式(ContentDialogMinWidth)太大。

因此,系统将对话框内容水平居中(因为Horizo​​ntalAlignment为居中),而使它看起来像是一个蓝色的边距空间(因为对话框背景不透明)。

VerticalAlignment为Top,这就是Dialog出现在Top上的原因。并且由于MaxHeight(ContentDialogMaxHeight)太小而被切断。增加它可以解决问题。

除此之外,我需要删除固定对话框的大小(从ContentDialog的根目录中删除MinWidth,MaxWidth,MinHeight,MaxHeight)。