Geek Answers Handbook

ContentDialog in UWP, poor scroll behavior

I created this ContentDialog with a high StackPanel specifically, but despite the content being inside the ScrollViewer, the content appears clipped when it runs out of space. What is happening 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 the page shows ScrollBars correctly.

0
source share
3 answers

I change my mind, I'm sorry, I did not understand that I was wrong! prefect decision,

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

"change the value of VerticalScrollBarVisibility disabled for auto" is not necessary!

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

I have the same question with you and I am looking for a lot of results in bing or google. but all is useless.

but haha, I found a simple method for this.

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

but it is useless in my case. and I changed the pen line and ๆžๅฎš that.

in ScrollViewer Node, I change the value of VerticalScrollBarVisibility. Disabled for auto and it is ๆžๅฎš.

My English is very poor, I hope to help you. my development 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>
+3
source

This is because the height of the ScrollViewer is set to "Auto". Try tying it to the ContentDialog 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>
+2
source

Here you will find the solution that you have: name, text box and bitton and list. You must change the default ContentDialog with this content template o create a new style to use it in any ContentDialog in your application:

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

Relationship Juanlu

0
source

More articles:


All Articles