Problema nascosto della barra di scorrimento XAML ScrollViewer (Silverlight)
-
22-07-2019 - |
Domanda
Ho questo strano problema per cui il contenuto in un visualizzatore di scorrimento aumenta di dimensioni, il visualizzatore di scorrimento mostra quindi la barra di scorrimento orizzontale. Tuttavia, la griglia in cui si trova ScrollViewer non sembra ridimensionarsi abbastanza per mostrare la barra di scorrimento.
Ho isolato il problema in questa app di esempio, fondamentalmente un po 'di xaml e del codice per simulare l'aumento delle dimensioni del contenuto.
Nota come la barra di scorrimento destra non viene visualizzata correttamente quando fai clic sul pulsante di ridimensionamento, ho aggiunto un po 'di riempimento per mostrare che si trova lì, ma non nel posto giusto.
Se rimuovo la riga superiore sembra funzionare.
Qualche idea e ringraziamento in anticipo ragazzi e ragazze?
<UserControl x:Class="SilverlightApplication7.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<Grid
ShowGridLines="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<Grid.RowDefinitions>
<RowDefinition x:Name="DealHeaderRow" Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="DealBarColumn" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="MarketViewerColumn" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="DealEditorColumn" Width="*" ></ColumnDefinition>
<ColumnDefinition x:Name="InfoColumn" Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ContentControl
x:Name="DealBarRegionContentControl"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0">
<TextBlock Text="DealBarRegion" Width="150" />
</ContentControl>
<ContentControl
Grid.Row="0"
Grid.Column="1"
Grid.RowSpan="2"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<Border Background="#FF9AF172">
<TextBlock Text="MarketViewerRegion" Width="150" />
</Border>
</ContentControl>
<ContentControl
Grid.Column="2"
Grid.ColumnSpan="2"
Grid.Row="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" >
<Border Background="#FFC1FC9F">
<TextBlock Text="DealHeaderRegion" />
</Border>
</ContentControl>
<ContentControl
Grid.Column="2"
Grid.Row="1"
VerticalAlignment="Top"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Border Background="MistyRose" >
<TextBlock Text="DealEditorRegion" />
</Border>
</ContentControl>
<Grid
Grid.Column="3"
Grid.Row="1"
>
<ContentControl
x:Name="InfoRegionControl"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch">
<!-- without the padding here you can't see the scroll bar at all !! Its like the
scroll ScrollViewer isn't correctly calculating its width to include the scroll bar,
or the grid isn't sizing at the points its visible??-->
<Border Padding="0,0,9,0" MinWidth="200" x:Name="DealInfoControlPlaceHolder">
<ScrollViewer
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
>
<StackPanel x:Name="ScrollContentPlaceHolder">
<Button Click="Button_Click" Content="Rezize Column" x:Name="ResizeButton" />
</StackPanel>
</ScrollViewer>
</Border>
</ContentControl>
</Grid>
</Grid>
Ed ecco il codice dietro:
using System.Windows;
using System.Windows.Controls;
namespace SilverlightApplication7
{
public partial class MainPage : UserControl
{
double _dealInfoControlPlaceHolderHeight = 0;
double _dealInfoControlPlaceHolderWidth = 0;
public MainPage()
{
InitializeComponent();
Loaded += (o, e) =>
{
// cache the original width and height
_dealInfoControlPlaceHolderHeight = DealInfoControlPlaceHolder.Height;
_dealInfoControlPlaceHolderWidth = DealInfoControlPlaceHolder.Width;
};
}
private void Button_Click(object sender, RoutedEventArgs e)
{
if (ScrollContentPlaceHolder.Height == 1200)
{
ScrollContentPlaceHolder.Height = _dealInfoControlPlaceHolderHeight;
ScrollContentPlaceHolder.Width = _dealInfoControlPlaceHolderWidth;
}
else
{
ScrollContentPlaceHolder.Height = 1200;
ScrollContentPlaceHolder.Width = 250;
}
}
}
}
Soluzione
Ok, non so perché quanto sopra non funziona, ma come soluzione alternativa ho solo ristrutturato la pagina in modo che si comporti allo stesso modo. Funziona:
<UserControl x:Class="SilverlightApplication7.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<Grid
ShowGridLines="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="DealBarColumn" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="MarketViewerColumn" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="DealEditorColumn" Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<ContentControl
x:Name="DealBarRegionContentControl"
Grid.Column="0"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0">
<TextBlock Text="DealBarRegion" Width="150" />
</ContentControl>
<ContentControl
Grid.Column="1"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<Border Background="#FF9AF172">
<TextBlock Text="MarketViewerRegion" Width="150" />
</Border>
</ContentControl>
<Grid
Grid.Column="2" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl
Grid.Row="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" >
<Border Background="#FFC1FC9F">
<TextBlock Text="DealHeaderRegion" />
</Border>
</ContentControl>
<Grid
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ContentControl
Grid.Column="0"
VerticalAlignment="Top"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Border Background="MistyRose" >
<TextBlock Text="DealEditorRegion" />
</Border>
</ContentControl>
<ContentControl
Grid.Column="1"
x:Name="InfoRegionControl"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Right">
<!-- without the padding here you can't see the scroll bar at all !! Its like the
scroll ScrollViewer isn't correctly calculating its width to include the scroll bar,
or the grid isn't sizing at the points its visible??-->
<Border Padding="0,0,9,0" MinWidth="200" x:Name="DealInfoControlPlaceHolder">
<ScrollViewer
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
>
<StackPanel x:Name="ScrollContentPlaceHolder">
<Button Click="Button_Click" Content="Rezize Column" x:Name="ResizeButton" />
</StackPanel>
</ScrollViewer>
</Border>
</ContentControl>
</Grid>
</Grid>
</Grid>