WPF 缩放+滚动条？

Question

我正在尝试缩放滚动查看器中的某些内容。

我正在寻找的缩放行为是 RenderTransform+ScaleTransform 的缩放行为。但这不适用于 ScrollViewer。

使用 LayoutTransform+ScaleTransform，滚动查看器确实会受到影响(仅限 ContentTemplate1)，但行为不像缩放。

假设 ContentTemplate1/ContentTemplate2 无法更改(即第 3 方控件)，我如何才能使用滚动查看器进行缩放？

<Grid>
    <Grid.Resources>
        <!-- Content type 1 -->
        <DataTemplate x:Key="ContentTemplate1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <TextBlock Background="DodgerBlue" Text="Left"/>
                <TextBlock Grid.Column="1" Background="DarkGray" Text="Right"/>
            </Grid>
        </DataTemplate>

        <!-- Content type 2 -->
        <DataTemplate x:Key="ContentTemplate2">
            <Viewbox>
                <TextBlock Background="DodgerBlue" Text="Scale to fit" Width="100" Height="70" Foreground="White" TextAlignment="Center"/>
            </Viewbox>
        </DataTemplate>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <TabControl>
        <!-- Content 1 -->
        <TabControl.Resources>
            <ScaleTransform x:Key="ScaleTransform"
                            ScaleX="{Binding ElementName=ZoomSlider,Path=Value}"
                            ScaleY="{Binding ElementName=ZoomSlider,Path=Value}" />
        </TabControl.Resources>
        <TabItem Header="Content 1">
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                <ContentControl ContentTemplate="{StaticResource ContentTemplate1}" Margin="10" RenderTransformOrigin=".5,.5">
                    <!-- Affects scrollviewer, but does not behave like a zoom -->
                    <!--<FrameworkElement.LayoutTransform>
                        <StaticResource ResourceKey="ScaleTransform" />
                    </FrameworkElement.LayoutTransform>-->

                    <!-- Expected zoom behavior, but doesn't affect scrollviewer -->
                    <FrameworkElement.RenderTransform>
                        <StaticResource ResourceKey="ScaleTransform" />
                    </FrameworkElement.RenderTransform>
                </ContentControl>
            </ScrollViewer>
        </TabItem>
        <!-- Content 2 -->
        <TabItem Header="Content 2">
            <ContentControl ContentTemplate="{StaticResource ContentTemplate2}" Margin="10" RenderTransformOrigin=".5,.5">
                <!-- Affects scrollviewer, but does not behave like a zoom -->
                <!--<FrameworkElement.LayoutTransform>
                        <StaticResource ResourceKey="ScaleTransform" />
                    </FrameworkElement.LayoutTransform>-->

                <!-- Expected zoom behavior, but doesn't affect scrollviewer -->
                <FrameworkElement.RenderTransform>
                    <StaticResource ResourceKey="ScaleTransform" />
                </FrameworkElement.RenderTransform>
            </ContentControl>

        </TabItem>
    </TabControl>

    <StackPanel Grid.Row="1" Orientation="Horizontal">
        <!-- Zoom -->
        <Slider x:Name="ZoomSlider"
                Width="100"
                Maximum="5"
                Minimum="0.1"
                Orientation="Horizontal"
                Value="1" />

        <!-- Autofit -->
        <CheckBox Content="Autofit?" x:Name="AutoFitCheckBox" />
    </StackPanel>
</Grid>

Answer 1

如果我理解正确的话:

• 您想使用 ZoomSlider slider 进行缩放吗？
• 如果内容太大而无法容纳在选项卡中，您希望显示滚动条吗？

如果是这样，那就是您想要的LayoutTransform。该转换是在测量和布局所有元素之前完成的，并且 ScrollViewer 将能够判断是否需要滚动条。

在我的机器上，如果您只是切换到 LayoutTransform，“Content 1” 选项卡就会按预期工作(请注意，在“Right”消失之前您必须缩放很多)离屏，切换滚动条):

“内容 2” 需要做更多工作。首先，该选项卡中没有 ScrollViewer，因此需要添加它。其次，ContentTemplate2 使用 ViewBox，默认情况下会拉伸(stretch)，因此只有放大到非常接近时，缩放才会产生效果。要禁用 ViewBox 的内置“缩放”，您可以将 ContentControl 容器居中(使用 Horizo​​ntalAlignment/VerticalAlignment)，这会强制它占用尽可能少的空间:

<TabItem Header="Content 2">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <ContentControl ContentTemplate="{StaticResource ContentTemplate2}" ...
                        HorizontalAlignment="Center" VerticalAlignment="Center" >
            <FrameworkElement.LayoutTransform>
                ...