CODEWITHSUNDEEP
c#wpfxaml
user1618054
user1618054

Reputation:

LayoutTransform on certain elements in canvas?

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

Answers (2)

dkozl
dkozl

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

MLElyakan
MLElyakan

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

Related Questions