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.
Creiamo innanzitutto la nostra ContentDialog ed inseriamo all'interno di essa una ListView
<ListView x:Name="list" DataContext="{Binding}"></ListView>
<
ListView
x:Name
=
"list"
DataContext
"{Binding}"
></
>
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();
ContentDialogNoScroll().ShowAsync();
Come ? possibile vedere non ? possibile raggiungere gli elementi che fuoriescono dal bordo della finestra.
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.
"Background"
"{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
005.
"HorizontalAlignment"
"Center"
006.
"VerticalAlignment"
"Top"
007.
"IsTabStop"
"False"
008.
"MaxHeight"
"{ThemeResource ContentDialogMaxHeight}"
009.
"MinHeight"
"{ThemeResource ContentDialogMinHeight}"
010.
"MaxWidth"
"{ThemeResource ContentDialogMaxWidth}"
011.
"MinWidth"
"{ThemeResource ContentDialogMinWidth}"
012.
"Template"
013.
Setter.Value
014.
ControlTemplate
015.
Border
"Container"
016.
Grid
"LayoutRoot"
017.
Grid.RowDefinitions
018.
RowDefinition
Height
"Auto"
019.
</
020.
Grid.ColumnDefinitions
021.
ColumnDefinition
Width
022.
023.
"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.
"DialogSpace"
VerticalAlignment
"Stretch"
033.
034.
035.
"*"
036.
037.
038.
ScrollViewer
"ContentScrollViewer"
039.
HorizontalScrollBarVisibility
"Disabled"
040.
VerticalScrollBarVisibility
041.
ZoomMode
042.
Margin
"{ThemeResource ContentDialogContentScrollViewerMargin}"
043.
IsTabStop
044.
045.
046.
047.
<!--Here, I delete 'Height="Auto"' of RowDefinition.-->
048.
<!--<RowDefinition Height="Auto" />-->
049.
050.
051.
ContentControl
"Title"
052.
"{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.
061.
062.
"{ThemeResource ContentDialogTitleMaxHeight}"
063.
ContentControl.Template
064.
"ContentControl"
065.
ContentPresenter
066.
"{TemplateBinding Content}"
067.
MaxLines
"2"
068.
TextWrapping
"Wrap"
069.
"{TemplateBinding ContentTemplate}"
070.
"{TemplateBinding Padding}"
071.
ContentTransitions
"{TemplateBinding ContentTransitions}"
072.
"{TemplateBinding HorizontalContentAlignment}"
073.
"{TemplateBinding VerticalContentAlignment}"
074.
075.
076.
077.
"Content"
078.
079.
080.
"{ThemeResource ControlContentThemeFontSize}"
081.
"{ThemeResource ContentControlThemeFontFamily}"
082.
"{ThemeResource ContentDialogContentMargin}"
083.
084.
Grid.Row
"1"
085.
086.
087.
088.
"CommandSpace"
"Bottom"
089.
090.
091.
092.
093.
"Button1Host"
094.
"{ThemeResource ContentDialogButton1HostMargin}"
095.
"{ThemeResource ContentDialogButtonMinWidth}"
096.
"{ThemeResource ContentDialogButtonMaxWidth}"
097.
"{ThemeResource ContentDialogButtonHeight}"
098.
099.
"Button2Host"
100.
"{ThemeResource ContentDialogButton2HostMargin}"
101.
102.
103.
104.
Grid.Column
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
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.
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
Codice d'esempio su repository GitHub