ViewBoxの中に設置したWrapPanelを親の親であるScrollViewerの横幅でレスポンシブルにさせる

XAMLのViewBoxを使うとViewのズームやズームアウトを導入することができます。このScrollViewerの中にViewBoxを配置し、更にViewBoxの中にWrapPanelを配置したときにWrapPanelをWindowやPageのサイズに合わせて機能させる方法について書き残します。

問題の現象

WrapPanel内のコンポーネントが改行しない

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Viewbox Stretch="None">
       <WrapPanel>
           <Button x:Name="button1" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button2" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button3" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button4" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button5" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button6" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button7" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button8" Content="Button" Width="75" Margin="10"/>
       </WrapPanel>
    </Viewbox>
</ScrollViewer>

このように書いてしまうと、WrapPanelの幅に制約がないのでButtonは改行なしで横一直線に並んでしまいます。

問題の解決

WrapPanelの幅をScrollViewerにBindingする

<ScrollViewer Name="MyScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Viewbox" Stretch="None">
       <WrapPanel Width="{Binding ElementName=MyScrollViewer, Path=ViewportWidth}">
           <Button x:Name="button1" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button2" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button3" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button4" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button5" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button6" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button7" Content="Button" Width="75" Margin="10"/>
           <Button x:Name="button8" Content="Button" Width="75" Margin="10"/>
       </WrapPanel>
    </Viewbox>
</ScrollViewer>

これでWrapPanelの横幅がScrollViewerの横幅に制限かかります。