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，绑定将处理休息

<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

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

这是代码：

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

    }

LayoutTransform对画布中的某些元素？

2 个答案: