我想显示图片并添加复选框“适合屏幕” - 使图像适合可见区域。
为了使图像适合可见区域,我使用以下xaml片段:
<Image Source="{Binding Picture}" Stretch="Uniform"/>
要禁用拟合并添加滚动,请使用以下xaml片段:
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<Image Source="{Binding Picture}" Stretch="None"/>
</ScrollViewer>
问题是如何将拟合和实际大小与滚动条组合使用并使用复选框在两种状态之间切换?
更新
问题是代码Image/@Stretch=Uniform
的行为方式与Image/@Stretch=None
内<ScrollViewer>
的行为方式相同。在两种情况下都可以看到滚动,图像以实际尺寸显示。
详情。代码
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<Image Source="{Binding Picture}" Stretch="Uniform" />
</ScrollViewer>
的工作方式与
相同<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<Image Source="{Binding Picture}" Stretch="None" />
</ScrollViewer>
答案 0 :(得分: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>
答案 1 :(得分:1)
您只能使用在图像样式上应用的触发器在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>