WPF，这个布局如何实现

WPF，这个布局怎么实现？

<Window x:Class="WPF4.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="550" Width="725">

    <Grid>

        <Viewbox Stretch="Uniform" Height="300" Width="300">

            <Canvas Height="350" Width="525" Background="Red">

                <Button Content="button1" Canvas.Top="100" Height="60" Width="120" Canvas.Left="450" />

            </Canvas>

        </Viewbox>

    </Grid>

</Window>

上面的代码中，Button在Canvas内部，由于绝对定位尺寸的原因，Button超出了Canvas的边缘。在Canvas外部，还有一个Viewbox元素，Button也超出了Viewbox的边缘。目前有两个问题请教：
1：Button为什么会超出Viewbox的边缘呢，Viewbox不是可以缩小元素的吗，把Canvas和Button缩小就不会超出边缘了啊？
2：如何实现这个功能：当Button触及Viewbox边缘的时候，就缩小Canvas和Button，使得Button不超出Viewbox的边缘呢？
------解决方案--------------------
1.你的Canvas Width="525"，你的button Width="120" Canvas.Left="450" 实际右边界570啊 这不明显超出了吗
2.固定Canvas 尺寸，两端对齐Viewbox边界，Viewbox尺寸设为自动，只要保证button在Canvas 里面就好了。
------解决方案--------------------
div+css
------解决方案--------------------
Viewbox的Stretch设置为Uniform