画布中某些元素的LayoutTransform？

Question

我希望在画布上进行布局转换，但我只希望某些项目受到影响。例如，如果我有一个带有图像的画布和用于特定函数的其他控件，我只希望在值变化时转换图像，而其他控件保持不变。

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

然后我们有：

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;

}

显然，所有的元素都会受到影响，但我想知道是否有一种方法可以指定哪些元素不受影响？绝对重要的是，此控件保留在画布中(因为它的目的需要这样做)。

Answer 1

您需要将LayoutTransform从Canvas移动到Image，并且不需要处理滑块的ValueChanged。只需修复绑定以使用正确的ElementName。从slider1更改为zoomSlider，绑定将处理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"/>

还可以通过创建隐式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"/>

Answer 2

请试试这个code.It作品，我希望这是你想要的

这是代码：

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

代码背后：

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;

    }