Reputation:
I want a layout transform on a canvas, but I only want certain items to be affected. For instance, if I have a canvas with an image and some other control used for a particular function, I only want the image to be transformed when the values change and the other control to remain the same.
<Canvas x:Name="canvas1">
<Canvas.LayoutTransform>
<TransformGroup>
<ScaleTransform x:Name="scaleTransform1" ScaleX="{Binding ElementName=slider1, Path=Value}" ScaleY="{Binding ElementName=slider1, Path=Value}" CenterX="0" CenterY="0"/>
</TransformGroup>
</Canvas.LayoutTransform>
<Border x:Name="border1" Cursor="SizeAll" Panel.ZIndex="1000" Visibility="Hidden" Background="Transparent" BorderThickness="1"/>
<Image x:Name="image1" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5, 0.5" Stretch="Fill"/>
</Canvas>
<Slider x:Name="zoomSlider" ValueChanged="zoomSlider_ValueChanged" Value="1" Minimum="0.05" Maximum="5" IsSnapToTickEnabled="True" LargeChange=".05" TickFrequency="0.05" SmallChange="0.05"/>
And then we have:
private void zoomSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
TransformGroup g = new TransformGroup();
g.Children.Add(new ScaleTransform(this.zoomSlider.Value, this.zoomSlider.Value));
g.Children.Add(new TranslateTransform(0, 0));
this.canvas1.LayoutTransform = g;
}
Obviously all elements are going to be affected, but I was wondering if there's a way to specify which ones are not to be? It's absolutely important that this control remain in the canvas (as its purpose requires this).
Upvotes: 0
Views: 2064
Reputation: 33394
You need to move LayoutTransform
from Canvas
to Image
and also you don't need to handle ValueChanged
for slider. Just fix binding to use proper ElementName
. Change from slider1
to zoomSlider
and binding will handle rest
<Canvas x:Name="canvas1">
<Border x:Name="border1" Cursor="SizeAll" Panel.ZIndex="1000" Visibility="Hidden" Background="Transparent" BorderThickness="1"/>
<Image x:Name="image1" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5, 0.5" Stretch="Fill">
<Image.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=zoomSlider, Path=Value}" ScaleY="{Binding ElementName=zoomSlider, Path=Value}" CenterX="0" CenterY="0"/>
</Image.LayoutTransform>
</Image>
</Canvas>
<Slider x:Name="zoomSlider" Value="1" Minimum="0.05" Maximum="5" IsSnapToTickEnabled="True" LargeChange=".05" TickFrequency="0.05" SmallChange="0.05"/>
You can also make it to automatically apply to all Image
controls in your Canvas
by creating implicit Style
<Canvas x:Name="canvas1">
<Canvas.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform ScaleX="{Binding ElementName=zoomSlider, Path=Value}" ScaleY="{Binding ElementName=zoomSlider, Path=Value}"/>
</Setter.Value>
</Setter>
</Style>
</Canvas.Resources>
<Border x:Name="border1" Cursor="SizeAll" Panel.ZIndex="1000" Visibility="Hidden" Background="Transparent" BorderThickness="1"/>
<Image x:Name="image1" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5, 0.5" Stretch="Fill"/>
</Canvas>
<Slider x:Name="zoomSlider" Value="1" Minimum="0.05" Maximum="5" IsSnapToTickEnabled="True" LargeChange=".05" TickFrequency="0.05" SmallChange="0.05"/>
Upvotes: 1
Reputation: 269
Please try this code.It works.I hope this is what you want
Here is code:
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="canvas1">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="scaleTransform1" ScaleX="{Binding ElementName=slider1, Path=Value}" ScaleY="{Binding ElementName=slider1, Path=Value}" CenterX="0" CenterY="0"/>
</TransformGroup>
</Grid.RenderTransform>
<Image Source="super.jpg" x:Name="image1" RenderTransformOrigin="0.5, 0.5" Stretch="None"/>
</Grid>
<Slider Grid.Row="1" VerticalAlignment="Center" Margin="0,20,0,0" Width="200" x:Name="zoomSlider" ValueChanged="zoomSlider_ValueChanged" Value="1" Minimum="0.05" Maximum="5" IsSnapToTickEnabled="True" LargeChange=".05" TickFrequency="0.05" SmallChange="0.05"/>
</Grid>
</Grid>
Codebehind:
private void zoomSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
TransformGroup g = new TransformGroup();
g.Children.Add(new ScaleTransform(this.zoomSlider.Value, this.zoomSlider.Value));
g.Children.Add(new TranslateTransform(0, 0));
this.canvas1.LayoutTransform = g;
}
Upvotes: 0