2

画像を表示し、チェックボックス「画面に合わせる」を追加したい - 画像を表示領域に合わせます。

画像を表示領域に合わせるには、次の xaml フラグメントを使用します。

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

フィッティングを無効にしてスクロールを追加するには、次の xaml フラグメントを使用します。

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

問題は、フィッティングと実際のサイズをスクロール バーと組み合わせて、チェックボックスを使用して 2 つの状態を切り替える方法です。

アップデート：

問題は、コードが内部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>
4

2 に答える 2

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>

アップデート

回避策として、2 つの画像をグリッドに配置し、このようにチェックボックスのチェック状態に応じてその可視性を試すことができます -

<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>
于 2012-07-20T17:28:47.803 に答える
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ます。これは、Checkbox.Checked プロパティをリッスンする別のコンバーターまたはスタイルで行うことができます。VerticalScrollBarVisibiltyDisabled

<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>
于 2012-07-20T17:14:41.543 に答える