对画布中的某些元素进行LayoutTransform

本文关键字：元素 LayoutTransform 布中 | 更新日期: 2023-09-27 18:29:38

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

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

显然，所有元素都会受到影响，但我想知道是否有办法指定哪些元素不会受到影响？这个控件保留在画布中是绝对重要的（因为它的目的需要这样）。

对画布中的某些元素进行LayoutTransform

您需要将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"/>

您还可以通过创建隐式Style 将其自动应用于Canvas中的所有Image控件

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

请尝试此代码。它有效。我希望这就是你想要的

这是代码：

  <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;
    }
相关文章：