WrapPanel控件增加滚动条

WrapPanel容器控件可以实现内部控件的自动布局，但是在内部控件过多时，并不能出现滚动条来显示全部控件。因此我们需要为其增加滚动条功能。

<WrapPanel Margin="0">

    <Rectangle Fill="#FF000000" Height="50" Width="50" Stroke="Black" RadiusX="10" RadiusY="10" />

    <Rectangle Fill="#FF111111" Height="50" Width="50" Stroke="Black" RadiusX="10" RadiusY="10" />

    <Rectangle Fill="#FF222222" Height="50" Width="50" Stroke="Black" RadiusX="10" RadiusY="10" />

    ……

</WrapPanel>

首先增加一个ScrollViewer控件，此控件用于显示滚动条。加入以后，就能够显示滚动条了。

<ScrollViewer x:Name="scrList" Margin="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

    <WrapPanel Margin="0">

        <Rectangle Fill="#FF000000" Height="50" Width="50" Stroke="Black" RadiusX="10" RadiusY="10" />

        <Rectangle Fill="#FF111111" Height="50" Width="50" Stroke="Black" RadiusX="10" RadiusY="10" />

        <Rectangle Fill="#FF222222" Height="50" Width="50" Stroke="Black" RadiusX="10" RadiusY="10" />

        ……

    </WrapPanel>

</ScrollViewer>

 

这时又有了一个新问题，因为增加了滚动条，WarpPanel控件宽度改成了自适应，内部控件全部排在了第一行，而这里我想是宽度根据窗体调整，高度自适应。所以设置了WrapPanel的宽度根据ScrollView改动。

<ScrollViewer x:Name="scrList" Margin="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

    <WrapPanel Margin="0" Width="{Binding ElementName=scrList, Path=Width, Mode=OneWay}">

        <Rectangle Fill="#FF000000" Height="50" Width="50" Stroke="Black" RadiusX="10" RadiusY="10" />

        <Rectangle Fill="#FF111111" Height="50" Width="50" Stroke="Black" RadiusX="10" RadiusY="10" />

        <Rectangle Fill="#FF222222" Height="50" Width="50" Stroke="Black" RadiusX="10" RadiusY="10" />

        ……

    </WrapPanel>

</ScrollViewer>

 

现在已经实现了WrapPanel根据显示内容来自动出现滚动条的功能了。