[WPF MVVM] System.Windows.Interactivity 를 이용한 ViewModel에서 SizeChanged Event Trigger 예제 입니다.

방법을 찾다보니 , Interactivity 를 이용한 방법이 있어 활용 해보았습니다.

 

<Window x:Class="GmSFaxAgentWpf.Views.ImageViewerWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GmSFaxAgentWpf.Views"
        xmlns:behaviors="clr-namespace:GmSFaxAgentWpf.Behaviors" 
        
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        
        mc:Ignorable="d"
        Title="ImageViewerWindow" Width="1152" Height="864" 
        
        >
        
        
            <DockPanel Grid.Column="1" Grid.Row="1" 
                    behaviors:SizeObserver.Observe="True"  
                    behaviors:SizeObserver.ObservedWidth="{Binding ImageGridWidth , Mode=OneWayToSource}"
                    behaviors:SizeObserver.ObservedHeight="{Binding ImageGridHeight , Mode=OneWayToSource}">
            <Border BorderThickness="0 1 0 0" BorderBrush="LightGray">
                <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                    <Canvas Width="{Binding ViewImageWidth}" Height="{Binding ViewImageHeight}" x:Name="CanvasViewImage" HorizontalAlignment="Left" VerticalAlignment="Top">

                        <Image Source="{Binding ViewImage}" x:Name="ViewImage" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"
                               Canvas.Left="0" Canvas.Top="0"
                            Width="{Binding ActualWidth , ElementName=CanvasViewImage}"
                            Height="{Binding ActualHeight ,ElementName=CanvasViewImage}">
                        </Image>

                        <Canvas.LayoutTransform>
                            <TransformGroup>
                                
                                <ScaleTransform ScaleX="{Binding ZoomLevel, UpdateSourceTrigger=PropertyChanged , Mode=TwoWay}"
                                                ScaleY="{Binding ZoomLevel, UpdateSourceTrigger=PropertyChanged , Mode=TwoWay}"/>

                                <RotateTransform Angle="{Binding RotateAngle , UpdateSourceTrigger=PropertyChanged , Mode=TwoWay}"/>
                                
                            </TransformGroup>
                        </Canvas.LayoutTransform>

                    </Canvas>
                </ScrollViewer>

            </Border>

            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SizeChanged">
                    <i:InvokeCommandAction Command="{Binding SizeChangedEventCommand}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>

        </DockPanel>

 

DockPanel 안에 아래 코드를 추가 하였습니다.

<i:Interaction.Triggers>                 <i:EventTrigger EventName="SizeChanged">                     <i:InvokeCommandAction Command="{Binding SizeChangedEventCommand}" />                 </i:EventTrigger> </i:Interaction.Triggers>

 

ViewModel 부분 

public ICommand SizeChangedEventCommand { get; set; }


public ImageViewerViewModel()
{
	SizeChangedEventCommand = new RelayCommand(OnSizeChanged);
}


private void OnSizeChanged()
{
            OnImageView();
}

 

 

OnImageView 메서드에서는 ,창의 크기를 늘리고 줄일때마다 이미지의 Width , Height도 조정되게 처리 하였습니다