Скрытая проблема полосы прокрутки XAML ScrollViewer (Silverlight)
-
22-07-2019 - |
Вопрос
У меня возникла странная проблема: содержимое средства просмотра прокрутки увеличивается в размере, а затем средство просмотра прокрутки показывает горизонтальную полосу прокрутки.Однако сетка, в которой в конечном итоге находится ScrollViewer, похоже, не меняет достаточного размера, чтобы отобразить полосу прокрутки.
Я выделил проблему в этом примере приложения, по сути, в некотором xaml и коде для имитации увеличения размера контента.
Обратите внимание, что правая полоса прокрутки отображается неправильно, когда вы нажимаете кнопку изменения размера. Я добавил некоторые отступы, чтобы показать, что она есть, но не в правильном месте.
Если я удалю верхнюю строку, похоже, это сработает.
Есть идеи и заранее спасибо, ребята и девочки?
<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>
И вот код:
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;
}
}
}
}
Решение
Хорошо, я не знаю, почему описанное выше не работает, но в качестве обходного пути я просто реструктурирую страницу, чтобы она вела себя так же.Это работает:
<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>