使WrapPanel尊重父母的宽度

时间:2021-05-31 22:21:50

Ok here's my code. Note that the StackPanel is directly in a UserControl.

好的,这是我的代码。请注意,StackPanel直接位于UserControl中。

<StackPanel Orientation="Horizontal">
    <ScrollViewer
    Width="450"
    VerticalScrollBarVisibility="Auto"
    HorizontalScrollBarVisibility="Disabled"
    >
        <Rectangle Width="400" Height="4000" Fill="BlanchedAlmond"></Rectangle>
    </ScrollViewer>

    <ScrollViewer
    VerticalScrollBarVisibility="Auto"
    HorizontalScrollBarVisibility="Disabled"
    >

    <ItemsControl
        BorderBrush="Green"
        BorderThickness="2"
        ItemsSource="{Binding Path=MyObservableCollection}"
        ItemTemplate="{StaticResource FatTemplate}"
        >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel 
                        Orientation="Horizontal"
                        >
                </WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

</ScrollViewer>
</StackPanel>

(Code EDITED)

(代码已编辑)

Note that the rectangle is just ther beacause the content of that scroll viewer is irrevelant.

请注意,矩形只是因为该滚动查看器的内容是不可避免的。

The problem is : the WrapPanel just expand horizontally and dosent wrap...

问题是:WrapPanel只是水平扩展和剂量包裹......

I found a few solutions.

我找到了一些解决方案。

1- Giving absolute width to the WrapPanel (but then it dosent resize with the window).

1-给WrapPanel提供绝对宽度(但随后窗口调整大小)。

2- Binding the width to it's parent width either ItemsControl or ScrollViewer (ScrollViewer worked better in a limited situation like this one).

2-将宽度绑定到它的父宽度ItemsControl或ScrollViewer(ScrollViewer在像这样的有限情况下工作得更好)。

Width="{Binding RelativeSource=
    {RelativeSource FindAncestor,
    AncestorType={x:Type ScrollViewer}},
    Path=ActualWidth}"

The problem with this technique is that if you got a control next to it in a StackPanel or in a Grid, you need to bind it to it's parent size minus the control next to it. Ther come the hard stuff. I Builded my converter which apply mathematical operations on the number recived so then i could substract a guiven width to it's parent width :

这种技术的问题在于,如果你在StackPanel或Grid中有一个控件,你需要将它绑定到它的父级大小减去旁边的控件。来得很难。我构建了我的转换器,对所接收的数字应用数学运算,然后我可以将一个guiven宽度减去它的父宽度:

Width="{Binding RelativeSource=
{RelativeSource FindAncestor,
AncestorType={x:Type UserControl}},
Path=ActualWidth,
Converter={StaticResource Convertisseur_Size_WXYZ}, 
ConverterParameter=-260}"

But still, since you cant bind a value you pass to a ConverterParameter,

但是,由于你无法绑定传递给ConverterParameter的值,

ConverterParameter={Binding ...} (dosent work)

I want to be able to resize my app with my WrapPanel and ScrollViewer resizing well,

我希望能够使用我的WrapPanel和ScrollViewer调整大小来调整我的应用程序的大小,

I want my UserControl to be easily maintainable,

我希望我的UserControl易于维护,

I would like my code cleaner than theses big binding expression which relies on parent control's Type.

我希望我的代码比那些依赖于父控件的Type的大型绑定表达式更清晰。

So my question is : What's a better solution?

所以我的问题是:什么是更好的解决方案?

Note : If anything isint clear, i can add detail.

注意:如果有什么不清楚,我可以添加细节。

1 个解决方案

#1


8  

Why would it wrap when the ScrollViewer allows horizontal scrolling? You should disable horizontal scrolling in the ScrollViewer:

当ScrollViewer允许水平滚动时,为什么会换行?您应该在ScrollViewer中禁用水平滚动:

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">

EDIT AFTER YOUR EDIT: It's because your StackPanel is oriented horizontally. A horizontally-oriented StackPanel will give whatever width its child requests to it - it won't constrain it at all. Use the right panel, and you'll be fine. Likely you just want a Grid with two columns.

编辑后编辑:这是因为您的StackPanel水平定向。水平方向的StackPanel将提供其子请求的任何宽度 - 它根本不会限制它。使用右侧面板,你会没事的。可能你只想要一个有两列的网格。

#1


8  

Why would it wrap when the ScrollViewer allows horizontal scrolling? You should disable horizontal scrolling in the ScrollViewer:

当ScrollViewer允许水平滚动时,为什么会换行?您应该在ScrollViewer中禁用水平滚动:

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">

EDIT AFTER YOUR EDIT: It's because your StackPanel is oriented horizontally. A horizontally-oriented StackPanel will give whatever width its child requests to it - it won't constrain it at all. Use the right panel, and you'll be fine. Likely you just want a Grid with two columns.

编辑后编辑:这是因为您的StackPanel水平定向。水平方向的StackPanel将提供其子请求的任何宽度 - 它根本不会限制它。使用右侧面板,你会没事的。可能你只想要一个有两列的网格。