使用复选框滚动/适合图像

Question

我想显示图像并添加复选框“适合屏幕” - 使图像适合可见区域。

为了使图像适合可见区域，我使用以下 xaml 片段：

<Image Source="{Binding Picture}" Stretch="Uniform"/>

要禁用拟合并添加滚动，我使用以下 xaml 片段：

<ScrollViewer VerticalScrollBarVisibility="Auto" 
              HorizontalScrollBarVisibility="Auto">
    <Image Source="{Binding Picture}" Stretch="None"/>
</ScrollViewer>

问题是如何将拟合和实际尺寸与滚动条结合起来，并使用复选框在两种状态之间切换？

更新：

问题在于代码Image/@Stretch=Uniform 的行为方式与<ScrollViewer> 中的Image/@Stretch=None 相同。在这两种情况下都可以看到滚动，并且图像以其实际大小显示。

详细说明。代码

<ScrollViewer VerticalScrollBarVisibility="Auto" 
              HorizontalScrollBarVisibility="Auto">
    <Image Source="{Binding Picture}" Stretch="Uniform" />
</ScrollViewer>

工作方式与

相同

<ScrollViewer VerticalScrollBarVisibility="Auto" 
              HorizontalScrollBarVisibility="Auto">
    <Image Source="{Binding Picture}" Stretch="None" />
</ScrollViewer>

Answer 1

创建一个值转换器，将复选框的选中状态转换为Stretch.Unfiorm 或Stretch.None。

public class StretchValueConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
    return (bool)value ? Stretch.Uniform : Stretch.None;
  }

  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    return value.Equals(Stretch.Uniform);
  }

}

然后在您的 XAML 中，您可以执行以下操作：

<Window.Resources>

  <local:StretchValueConverter x:Key="StretchValueConverter" />

</Window.Resources>

<CheckBox x:Name="FitToScreen" />

<ScrollViewer VerticalScrollBarVisibility="Auto" 
              HorizontalScrollBarVisibility="Auto">
    <Image Source="{Binding Picture}" Stretch="{Binding ElementName=FitToScreen Converter={StaticResource StretchValueConverter}, Path=Checked"/>
</ScrollViewer>

更新

您还需要将HorizontalScrollBarVisibility 和VerticalScrollBarVisibilty 设置为Disabled 以强制滚动查看器的内容不超出边界。您可以使用另一个转换器或样式来监听 Checkbox.Checked 属性。

<Window x:Class="Overflow.Examples.Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <CheckBox x:Name="FitToScreen" Grid.Row="0" Content="Fit to screen" />

        <ScrollViewer Grid.Row="1">
            <Image Source="{Binding Picture}">
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Stretch" Value="None" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=FitToScreen, Path=IsChecked}" Value="True">
                                <Setter Property="Stretch" Value="Uniform" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>

            <ScrollViewer.Style>
                <Style TargetType="ScrollViewer">
                    <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
                    <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=FitToScreen, Path=IsChecked}" Value="True">
                            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
                            <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ScrollViewer.Style>
        </ScrollViewer>
    </Grid>
</Window>

Answer 2

您只能使用应用于图像样式的触发器在 xaml 中执行此操作 -

<CheckBox x:Name="FitToScreen" />    
    <ScrollViewer VerticalScrollBarVisibility="Auto" 
                  HorizontalScrollBarVisibility="Auto">
        <Image Source="{Binding Picture}">
           <Image.Style>
              <Style TargetType="Image">
                 <Setter Property="Stretch" Value="None"/>
                 <Style.Triggers>
                     <Trigger Property="IsChecked" SourceName="FitToScreen" Value="True">
                        <Setter Property="Stretch" Value="Uniform"/>
                     </Trigger>
                 </Style.Triggers>
              </Style>
           </Image.Style>
        </Image>
    </ScrollViewer>

更新

作为一种解决方法，您可以将两个图像放在一个网格中，并根据复选框选中状态来使用其可见性，如下所示 -

<CheckBox x:Name="FitToScreen"/> 
<Grid>
  <Grid.Resources>
     <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
  </Grid.Resources>
  <Image Source="{Binding Picture}" Stretch="Uniform"
         Visibilty="{Binding IsChecked, ElementName=FitToScreen, Converter={StaticResource BooleanToVisibilityConverter}}"/>
  <ScrollViewer VerticalScrollBarVisibility="Auto" 
              HorizontalScrollBarVisibility="Auto">
    <Image Source="{Binding Picture}" Stretch="None"/>
  <ScrollViewer.Style>
    <Style TargetType="Image">
       <Setter Property="Visibility" Value="Visible"/>
         <Style.Triggers>
            <Trigger Property="IsChecked" SourceName="FitToScreen" Value="True">
               <Setter Property="Visibility" Value="Collapsed"/>
            </Trigger>
         </Style.Triggers>
     </Style>
  </ScrollViewer.Style>
  </ScrollViewer>
</Grid>