Geek Answers Handbook

LayoutTransform for specific elements in the canvas?

I want to convert the layout to canvas, but I want certain elements to be affected. For example, if I have a canvas with an image and some other control used for a specific function, I want the image to be converted 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 the elements will be affected, but I was wondering if there is a way to indicate which ones will not? It is imperative that this control remains in the canvas (as its purpose requires it).

0
source share
2 answers

LayoutTransform Canvas Image, ValueChanged . ElementName. slider1 zoomSlider,

<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"/>

Image Canvas, 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"/>
+2

, . . , , .

:

  <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;

    }
0

More articles:


All Articles