UWP 中的 ContentDialog，糟糕的滚动行为

本文介绍了UWP 中的 ContentDialog，糟糕的滚动行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我特意用一个高的 StackPanel 创建了这个 ContentDialog，但即使内容在 ScrollViewer 中，当它没有足够的空间时，内容也会被剪裁.那里发生了什么?

<滚动查看器><堆栈面板><按钮>你好</按钮><按钮>你好</按钮><按钮>你好</按钮><按钮>你好</按钮><按钮>你好</按钮><按钮>你好</按钮><按钮>你好</按钮><按钮>你好</按钮><按钮>你好</按钮><按钮>你好</按钮><按钮>你好</按钮><按钮>你好</按钮></StackPanel></ScrollViewer></ContentDialog>

但是，页面内的相同内容会正确显示滚动条.

解决方案

我改变主意了，对不起，我发现我现在错了！完美的解决方案是，

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

将禁用的 VerticalScrollBarVisibility 值修改为自动" 是不需要的！

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

我和你有同样的问题，我在 bing 或 google 中搜索了很多结果.但都无济于事.

不过哈哈，我找到了一个简单的搞定方法.

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

但在我的情况下也无用.然后我换了花药系，搞定了.

在 ScrollViewer 节点中，我修改了 VerticalScrollBarVisibility值禁用到自动和它搞定.

我的英文很差，希望能帮到你.我的开发环境是 win10 版本 10240

完整代码如下:

<ContentControl x:Name="UserInfoDialogContentControl"/><ContentDialog.Template><ControlTemplate TargetType="ContentDialog"><Border x:Name="Container"><Grid x:Name="LayoutRoot"><Grid.RowDefinitions><RowDefinition Height="自动"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><Border x:Name="背景元素"背景="{模板绑定背景}"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="自动"/><RowDefinition Height="*"/><RowDefinition Height="自动"/></Grid.RowDefinitions><ScrollViewer x:Name="ContentScrollViewer"HorizontalScrollBarVisibility="禁用"VerticalScrollBarVisibility="自动"ZoomMode="禁用"边距="{ThemeResource ContentDialogContentScrollViewerMargin}"IsTabStop="假"><网格><Grid.RowDefinitions><RowDefinition Height="自动"/><!--这里，我删除了 RowDefinition 的 'Height="Auto"'.--><行定义/></Grid.RowDefinitions><ContentControl x:Name="标题"Margin="{ThemeResource ContentDialogTitleMargin}"内容="{模板绑定标题}"ContentTemplate="{TemplateBinding TitleTemplate}"字体大小=20"FontFamily="Segoe UI"FontWeight="正常"Foreground="{TemplateBinding Foreground}"水平对齐=左"垂直对齐=顶部"IsTabStop="假"MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}" ><ContentControl.Template><ControlTemplate TargetType="ContentControl"><内容展示者内容="{模板绑定内容}"MaxLines="2"TextWrapping="Wrap"ContentTemplate="{TemplateBinding ContentTemplate}"边距="{模板绑定填充}"ContentTransitions="{TemplateBinding ContentTransitions}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></控制模板></ContentControl.Template></内容控制><ContentPresenter x:Name="内容"ContentTemplate="{TemplateBinding ContentTemplate}"内容="{模板绑定内容}"FontSize="{ThemeResource ControlContentThemeFontSize}"FontFamily="{ThemeResource ContentControlThemeFontFamily}"边距="{ThemeResource ContentDialogContentMargin}"Foreground="{TemplateBinding Foreground}"Grid.Row="1"TextWrapping="Wrap"/></网格></ScrollViewer><Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"><Grid.ColumnDefinitions><列定义/><列定义/></Grid.ColumnDefinitions><Border x:Name="Button1Host"Margin="{ThemeResource ContentDialogButton1HostMargin}"MinWidth="{ThemeResource ContentDialogButtonMinWidth}"MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"Height="{ThemeResource ContentDialogButtonHeight}"HorizontalAlignment="拉伸"/><Border x:Name="Button2Host"Margin="{ThemeResource ContentDialogButton2HostMargin}"MinWidth="{ThemeResource ContentDialogButtonMinWidth}"MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"Height="{ThemeResource ContentDialogButtonHeight}"Grid.Column="1"HorizontalAlignment="拉伸"/></网格></网格></边框></网格></边框></控制模板></ContentDialog.Template></ContentDialog>

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.

解决方案

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

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>

这篇关于UWP 中的 ContentDialog，糟糕的滚动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Contentdialog