Question

我有以下组件层次结构，用ID表示以减轻混淆：

|>ScrollViewer[1]
|->StackPanel
|-->Expander[2]
|--->ScrollViewer[3]
|---->StackPanel
|----->Button

这里的问题是我希望[3]的宽度绑定到[1]的宽度。在我的代码中，我这样做：

Width="{Binding Path=ActualWidth, ElementName=TimeScrollViewer, Converter={converters:ScalarConverter}, ConverterParameter='0.95'}"

转换器只是将值缩放0.95。

现在，这个部分的工作原理是[3]（红色轮廓）可以在整个宽度上滚动，但是只有[2]宽度范围内的部分才是可见（虚线轮廓）。

显示不良行为的视频： https://youtu.be/_Qw9W0sGfP4

XAML：

<s:SurfaceScrollViewer Name="TimeScrollViewer" Grid.Row="1" Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden">
    <ItemsControl Name="TimeItemsControl">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Expander Expanded="ExpanderExpanded" Collapsed="ExpanderCollapsed" Header="{Binding Header}" HorizontalContentAlignment="Center" Width="{Binding Path=ActualWidth, ElementName=TimeScrollViewer, Converter={converters:ScalarConverter}, ConverterParameter='0.2'}">
                    <s:SurfaceScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" Width="{Binding Path=ActualWidth, ElementName=TimeScrollViewer, Converter={converters:ScalarConverter}, ConverterParameter='0.95'}">
                        <ItemsControl ItemsSource="{Binding GuestList}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <s:SurfaceButton Content="{Binding GuestName}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="{Binding Path=ActualWidth, ElementName=TimeScrollViewer, Converter={converters:ScalarConverter}, ConverterParameter='0.15'}"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </s:SurfaceScrollViewer>
                </Expander>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</s:SurfaceScrollViewer>

如何让ScrollViewer正确填充红色轮廓？

Answer 1

忘记尝试将元素的宽度绑定在一起。只需设置ItemContainerStyle的{{1}}即可横向拉伸子项：

ItemsControl

WPF扩展器的宽度ScrollViewer内容

1 个答案: