Table of Contents

Introduzione

Gli oggetti ContentDialog permettono di visualizzare una finestra modale per bloccare l'applicazione in attesa di un input da parte dell'utente. Questa tipologia di controlli ? utilizzata da moltissime applicazioni e l'utente ? abituato ad interagire con esse.

L'attuale implementazione sulla piattaforma UA (Windows 8/ Windows phone 8.1) e UWP (Windows 10 Desktop e Mobile) ha un bug che non permette di gestire correttamente la visualizzazione di elementi con contenuto che pu? essere scrollato da parte dell'utente.

Riprodurre il problema

Creiamo innanzitutto la nostra ContentDialog ed inseriamo all'interno di essa una ListView

<ListView x:Name="list" DataContext="{Binding}"></ListView>

nel codice popoliamola poi con un insieme numeroso di elementi di elementi

1.String[] listElements = new String[100];
2. for (int i = 0; i < 100; i++)
3. {
4. listElements[i] = i.ToString();
5. }
6. list.ItemsSource = listElements;

a questo punto all'interno del nostro codice chiameremo nel classico modo la creazione della dialog con un'istruzione del tipo

1.new ContentDialogNoScroll().ShowAsync();

Come ? possibile vedere non ? possibile raggiungere gli elementi che fuoriescono dal bordo della finestra.

Come risolvere il problema

Per risolvere il problema occorre fare una modifica allo stile predefinito delle ContentDialog

Basterà quindi aggiungere nel file App.xaml lo stile modificato

001.<Application.Resources>
002.       <Style TargetType="ContentDialog" x:Key="scrollableDialog" >
003.           <Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
004.           <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"  />
005.           <Setter Property="HorizontalAlignment" Value="Center" />
006.           <Setter Property="VerticalAlignment" Value="Top" />
007.           <Setter Property="IsTabStop" Value="False" />
008.           <Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
009.           <Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
010.           <Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
011.           <Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
012.           <Setter Property="Template">
013.               <Setter.Value>
014.                   <ControlTemplate TargetType="ContentDialog">
015.                       <Border x:Name="Container">
016.                           <Grid x:Name="LayoutRoot">
017.                               <Grid.RowDefinitions>
018.                                   <RowDefinition Height="Auto" />
019.                               </Grid.RowDefinitions>
020.                               <Grid.ColumnDefinitions>
021.                                   <ColumnDefinition Width="Auto" />
022.                               </Grid.ColumnDefinitions>
023.                               <Border x:Name="BackgroundElement"
024.                                    Background="{TemplateBinding Background}"
025.                                    FlowDirection="{TemplateBinding FlowDirection}"
026.                                    BorderThickness="{ThemeResource ContentDialogBorderWidth}"
027.                                    BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
028.                                    MaxWidth="{TemplateBinding MaxWidth}"
029.                                    MaxHeight="{TemplateBinding MaxHeight}"
030.                                    MinWidth="{TemplateBinding MinWidth}"
031.                                    MinHeight="{TemplateBinding MinHeight}" >
032.                                   <Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
033.                                       <Grid.RowDefinitions>
034.                                           <RowDefinition Height="Auto" />
035.                                           <RowDefinition Height="*" />
036.                                           <RowDefinition Height="Auto" />
037.                                       </Grid.RowDefinitions>
038.                                       <ScrollViewer x:Name="ContentScrollViewer"
039.                                            HorizontalScrollBarVisibility="Disabled"
040.                                            VerticalScrollBarVisibility="Disabled"
041.                                            ZoomMode="Disabled"
042.                                            Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
043.                                            IsTabStop="False">
044.                                           <Grid>
045.                                               <Grid.RowDefinitions>
046.                                                   <RowDefinition Height="Auto" />
047.                                                   <!--Here, I delete 'Height="Auto"' of RowDefinition.-->
048.                                                   <!--<RowDefinition Height="Auto" />-->
049.                                                   <RowDefinition />
050.                                               </Grid.RowDefinitions>
051.                                               <ContentControl x:Name="Title"
052.                                                Margin="{ThemeResource ContentDialogTitleMargin}"
053.                                                Content="{TemplateBinding Title}"
054.                                                ContentTemplate="{TemplateBinding TitleTemplate}"
055.                                                FontSize="20"
056.                                                FontFamily="Segoe UI"
057.                                                FontWeight="Normal"
058.                                                Foreground="{TemplateBinding Foreground}"
059.                                                HorizontalAlignment="Left"
060.                                                VerticalAlignment="Top"
061.                                                IsTabStop="False"
062.                                                MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}" >
063.                                                   <ContentControl.Template>
064.                                                       <ControlTemplate TargetType="ContentControl">
065.                                                           <ContentPresenter
066.                                                            Content="{TemplateBinding Content}"
067.                                                            MaxLines="2"
068.                                                            TextWrapping="Wrap"
069.                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
070.                                                            Margin="{TemplateBinding Padding}"
071.                                                            ContentTransitions="{TemplateBinding ContentTransitions}"
072.                                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
073.                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
074.                                                       </ControlTemplate>
075.                                                   </ContentControl.Template>
076.                                               </ContentControl>
077.                                               <ContentPresenter x:Name="Content"
078.                                                ContentTemplate="{TemplateBinding ContentTemplate}"
079.                                                Content="{TemplateBinding Content}"
080.                                                FontSize="{ThemeResource ControlContentThemeFontSize}"
081.                                                FontFamily="{ThemeResource ContentControlThemeFontFamily}"
082.                                                Margin="{ThemeResource ContentDialogContentMargin}"
083.                                                Foreground="{TemplateBinding Foreground}"
084.                                                Grid.Row="1"
085.                                                TextWrapping="Wrap" />
086.                                           </Grid>
087.                                       </ScrollViewer>
088.                                       <Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
089.                                           <Grid.ColumnDefinitions>
090.                                               <ColumnDefinition/>
091.                                               <ColumnDefinition/>
092.                                           </Grid.ColumnDefinitions>
093.                                           <Border x:Name="Button1Host"
094.                                            Margin="{ThemeResource ContentDialogButton1HostMargin}"
095.                                            MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
096.                                            MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
097.                                            Height="{ThemeResource ContentDialogButtonHeight}"
098.                                            HorizontalAlignment="Stretch" />
099.                                           <Border x:Name="Button2Host"
100.                                            Margin="{ThemeResource ContentDialogButton2HostMargin}"
101.                                            MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
102.                                            MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
103.                                            Height="{ThemeResource ContentDialogButtonHeight}"
104.                                            Grid.Column="1"
105.                                            HorizontalAlignment="Stretch" />
106.                                       </Grid>
107.                                   </Grid>
108.                               </Border>
109. 
110.                           </Grid>
111.                       </Border>
112.                   </ControlTemplate>
113.               </Setter.Value>
114.           </Setter>
115.       </Style>
116.   </Application.Resources>

e poi aggiungere la tag della nostra ContentDialog

Style="{StaticResource scrollableDialog}"

Andando adesso a rieseguire il codice tutto funzionerà correttamente.

Come potete notare per risolvere il problema ? bastato commentare la seconda riga

<RowDefinition Height="Auto" />

per ottenere il risultato sperato.

Conclusione

In questo articolo abbiamo visto come poter risolvere in modo semplice e riutilizzabile un bug presente nello stile di defauld della classe ContentDialog.

Il nuovo stile è stato infatti inserito come risorsa globale, in questo modo sar? possibile riutilizzarlo in tutte le dialog in cui ne avremo bisogno

Risorse

Codice d'esempio su repository GitHub