UWP: ContentDialog size and margin

1
votes

I want content dialog without buttons / margins.

I used next code inside resource dictionary (note all the 0's):

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

If I set content dialog width / height inside XAML, the bottom is cut off (if not, it will occupy entire screen height), how to fix it:

enter image description here

Note that blue margin (the dialog's backround is blue), how to remove it?

Also, the dialog is shown on top instead of being in center.

Content is a Grid with 0 padding/margin.

2
uwpdialogmargin
What effect do you want to achieve? Maybe the content dialog is not the appropriate control, please see the Dialogs and flyouts topic. – Breeze Liu - MSFT
do you set MaxHeight property? – Parsa Karami
I want dialog to not have margin with the dialog's content. Also set fixed width and height, but this clips the dialog's content as shown in the image. – Borzh
Thanks @ParsaKarami you gave me the idea to set MinWidth/MaxWidth and MinHeight/MaxHeight to fixed values. This centers the Dialog vertically. Now how to remove the blue margin? – Borzh

2 Answers

1
votes

Use MaxWidth and MaxHeight in your template for controlling the size of your dialog, You also can use an ScrollViewer and fixed Height inside your template in order to create a fixed height content dialog which can scroll content inside it. For removing margin you can also change your template in this tag:

<Grid x:Name="DialogSpace">

This is my dialog template style:

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

Basically the issue was that in my Styles.xaml I had MinWidth too big for the ContentDialog style (ContentDialogMinWidth).

So the system centers the Dialog Content horizontally (as HorizontalAlignment is Center), leaving what it appears to be a margin space of blue color (as dialog background wasn't transparent).

The VerticalAlignment was Top, which is why Dialog was appearring on the Top. And it was cut off because MaxHeight (ContentDialogMaxHeight) was too small. Increasing it fixed the problem.

Besides that, I needed to remove fix dialog size (removing MinWidth, MaxWidth, MinHeight, MaxHeight from the root of my ContentDialog).