将"Stretch.Uniform“和"Stretching.None”替换为ViewBox和ScrollViewer

Question

当您有一个比监视器更大的图像时，我想要实现浏览器中非常著名的行为：

1. 最初，图像显示在窗口区域内，鼠标光标是一个带有"+“图标的放大镜；
2. 如果单击，会发生两种情况: a.图像以其本机像素大小显示；b.滚动条出现；

我想要一个大屏幕的UniformGrid的效果。为此，我可以使用ViewBox。我已经得到了我想要的将控件放入具有ViewBox属性的Stretch.Uniform中的控件，并且在MouseLeftButtonDown事件中，它在Stretch.None和Stretch.Uniform之间切换，就像浏览器类推中的大图像一样，只是没有滚动条。

现在，如果我添加ScrollViewer (ViewBox -> ScrollViewer -> UniformGrid)，效果就不再起作用了，因为ScrollViewer总是显示(大于窗口的) MyUserControl及其本机分辨率，也就是说，剪裁并激活滚动条，而我希望在这个版本和“its in ViewBox”版本之间交替使用。

下面是我如何获得调整大小的方法，但是ScrollViewer从不显示：

        <Viewbox x:Name="vbox" Stretch="None">
            <ScrollViewer x:Name="scroll" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
                <UniformGrid x:Name="ugrid" Columns="2" MouseLeftButtonDown="UniformGrid_MouseLeftButtonDown">
                    <local:AtlasMasculinoAnterior/>
                    <local:AtlasMasculinoPosterior/>
                </UniformGrid>      
            </ScrollViewer>     
        </Viewbox>          

如果更改顺序，则滚动条总是会显示，并且缩放不会在鼠标单击时切换(尽管事件触发)：

    <ScrollViewer x:Name="scroll" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
        <Viewbox x:Name="vbox" Stretch="None">
            <UniformGrid x:Name="ugrid" Columns="2" MouseLeftButtonDown="UniformGrid_MouseLeftButtonDown">
                <local:AtlasMasculinoAnterior/>
                <local:AtlasMasculinoPosterior/>
            </UniformGrid>      
        </Viewbox>      
    </ScrollViewer> 

在这里，事件背后的代码：

    private void UniformGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (vbox.Stretch == Stretch.None)
        {                
            vbox.Stretch = Stretch.Uniform;
        }
        else
            vbox.Stretch = Stretch.None;
    }

那么，我做错了什么，或者我应该怎么做才能达到预期的效果呢？

在我看来，我想在ViewBox (Stretch.Uniform)中的控件和ScrollViewer中的控件之间进行交替，但是我想知道如何产生相同的效果，因为这两个元素都是布局树的一部分(一个在另一个中)，或者即使我应该，也可以在容器中移动UniformGrid，然后在代码后面以编程方式操作。

Answer 1

让它以一种黑客的方式工作，方法是拥有一个具有ViewBox和ScrollViewer的网格，并将UniformGrid放在其中一个XAML中。然后，在代码隐藏中，我以编程方式将UniformGrid从其当前容器中分离出来，并将其附加到另一个容器(使用布尔标志来控制它在哪里，但这是有争议的)：

    <Grid x:Name="grid">
        <ScrollViewer x:Name="scroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"/>
        <Viewbox x:Name="viewbox" Stretch="Uniform">
            <UniformGrid x:Name="ugrid" Columns="2" MouseLeftButtonDown="UniformGrid_MouseLeftButtonDown">
                <local:AtlasMasculinoAnterior/>
                <local:AtlasMasculinoPosterior/>
            </UniformGrid>  
        </Viewbox>  
    </Grid> 

和

    bool atlasfullscreen = false;        

    private void UniformGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {   
        UniformGrid ug = sender as UniformGrid;

        if (atlasfullscreen)
        {
            scroll.Content = null;
            viewbox.Child = ug;               
            atlasfullscreen = false;
        }
        else
        {
            viewbox.Child = null;
            scroll.Content = ug;
            atlasfullscreen = true;
        }
    }

Answer 2

我有一个类似的用例，我需要在Stretch.None和Stretch.Uniform之间交替使用一个项，当Stretch.None时，我需要滚动条是可见的。

最后我发现，当我设置Stretch.None时，我需要将ScrollViewer的宽度和高度设置为ViewBox的父ActualWidth /高度，而当Stretch.Uniform时，我需要清除ScrollViewer的宽度和高度。

因此，使用原始的XAML，加上新的Grid，下面是新的XAML：

<Grid x:Name="grid">
    <Viewbox x:Name="vbox"
             Stretch="Uniform">
        <ScrollViewer x:Name="scroll"
                      HorizontalScrollBarVisibility="Auto"
                      VerticalScrollBarVisibility="Auto">
            <UniformGrid x:Name="ugrid"
                         Columns="2"
                         MouseLeftButtonDown="UniformGrid_MouseLeftButtonDown">
                <local:AtlasMasculinoAnterior />
                <local:AtlasMasculinoPosterior />
            </UniformGrid>
        </ScrollViewer>
    </Viewbox>
</Grid>

新代码的背后：

private void UniformGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (vbox.Stretch == Stretch.None)
    {                
        vbox.Stretch = Stretch.Uniform;
        scroll.Width = double.NaN;
        scroll.Height = double.NaN;
    }
    else
    {
        vbox.Stretch = Stretch.None;
        scroll.Width = grid.ActualWidth;
        scroll.Height = grid.ActualHeight;
    }
}

您可能需要对上面的示例进行调整，以了解Viewbox现在是如何在网格中运行的--但是对于我使用类似XAML /代码的用例，我不需要不断地将子控件从Viewbox移动到另一个控件并返回。

因此，概括地说:当Viewbox.Stretch = Uniform时，将滚动器的宽度/高度设置为double.NaN，当Viewbox.Stretch = None时，将滚动查看器的宽度/高度设置为Viewbox.Parent.ActualWidth / Height。