Reputation: 13972

ContentDialog in UWP, bad scrolling behavior

I've created this ContentDialog with a tall StackPanel on purpose, but even though the contents are inside a ScrollViewer, the content appears clipped when it doesn't have enough space. What's going on there?

<ContentDialog x:Name="ContentDialog">
    <ScrollViewer>
        <StackPanel>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
        </StackPanel>
    </ScrollViewer>
</ContentDialog>

However, the same content inside a Page shows the ScrollBars properly.

Upvotes: 0

Answers (3)

JuanluElGuerre

Reputation: 77

Here anoter solution whe you have: A title, Textbox and botton and a ListView.
You have to modify the default ContentDialog with this content template o create a new style to use it in whatever ContentDialog in your app:

<Style x:Key="MyCustomToolsContentDialog"
    TargetType="ContentDialog">
<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>
                                <!-- Modify to 'Height="*"' intead of 'Height="Auto"'-->
                                <RowDefinition Height="*" />
                                <!-- Modify to 'Height="Auto"' intead of 'Height="*"'-->
                                <RowDefinition Height="Auto" />
                                <!-- Delete' RowDefinition -->
                                <!--<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" />
                                        <!-- Delete 'Height="Auto"' of RowDefinition.-->
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <ContentControl x:Name="Title"
                                                    Margin="{ThemeResource ContentDialogTitleMargin}"
                                                    Content="{TemplateBinding Title}"
                                                    ContentTemplate="{TemplateBinding TitleTemplate}"
                                                    FontSize="20"
                                                    FontFamily="Segoe UI"
                                                    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>

Regards Juanlu

Upvotes: 0

AppxKing

Reputation: 46

i change my mind, im sorry, i fround i was wrong now! the prefect solution is,

https://social.msdn.microsoft.com/Forums/windowsapps/en-US/9112c2fe-1d93-48c9-9638-815be8005b86/uwpwindows-10-uap-scrollviewer-in-contentdialog

"modify the VerticalScrollBarVisibility Value Disabled to Auto" is not need!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~@20151122

I has the same question with you, and i search many results in bing or google. but all useless.

but haha, I found a simple method to 搞定 it.

At first look this: https://social.msdn.microsoft.com/Forums/windowsapps/en-US/9112c2fe-1d93-48c9-9638-815be8005b86/uwpwindows-10-uap-scrollviewer-in-contentdialog

but it useless too in my case. and i changed anther line and 搞定 it.

in the ScrollViewer Node, i modify the VerticalScrollBarVisibility Value Disabled to Auto and it 搞定.

My english is very poor, Hope to help you. my dev environment is win10 version 10240

Full code under:

<ContentDialog x:Name="UserInfoDialog" Title="个人详细资料"
                   PrimaryButtonText="关闭" PrimaryButtonClick="UserInfoDialog_PrimaryButtonClick">
        <ContentControl x:Name="UserInfoDialogContentControl"/>
        <ContentDialog.Template>
            <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="Auto"
                                        ZoomMode="Disabled"
                                        Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
                                        IsTabStop="False">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <!--Here, I delete 'Height="Auto"' of RowDefinition.-->
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <ContentControl x:Name="Title"
                                            Margin="{ThemeResource ContentDialogTitleMargin}"
                                            Content="{TemplateBinding Title}"
                                            ContentTemplate="{TemplateBinding TitleTemplate}"
                                            FontSize="20"
                                            FontFamily="Segoe UI"
                                            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>
        </ContentDialog.Template>
    </ContentDialog>

Upvotes: 3

gregkalapos

Reputation: 3619

It's because the ScrollViewer's height ist set to "Auto". Try to bind it to the ContentDialog's height:

 <ContentDialog x:Name="ContentDialog">
    <ScrollViewer Height="{Binding ActualHeight, ElementName=ContentDialog}"  >
        <StackPanel>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
            <Button>Hola</Button>
        </StackPanel>
    </ScrollViewer>
</ContentDialog>

Upvotes: 2

ContentDialog in UWP, bad scrolling behavior

Answers (3)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~@20151122

Related Questions