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根據顯示內容來自動出現滾動條的功能了。