WPF基于其他控件移动控件

Question

我有以下<canvas>：

 <Canvas>
        <ToggleButton Height="30" Width="125" Name="DisplayCanvas"
                      Background="Transparent"
                      BorderBrush="Transparent" Canvas.ZIndex="1" Cursor="Hand"
                      ClickMode="Press" Canvas.Top="11">
            <ToggleButton.Style>
                <Style TargetType="{x:Type ToggleButton}">
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Border Background="{TemplateBinding Background}">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Transparent"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>

        </ToggleButton>

        <Image Source="../Images/Button/customise.png" Height="30" Width="30" Canvas.Top="11"/>
        <Label Content="Customize" VerticalAlignment="Center" Canvas.Left="31" Canvas.Top="14" Foreground="White"/>

        <Path Data="M0,10 L5,0 L10,10" Stroke="White" 
              Height="8"
              StrokeThickness="2" HorizontalAlignment="Center" Canvas.Left="101.733"
              Canvas.Top="22" Stretch="Fill" Width="15">
            <Path.Style>
                <Style TargetType="Path">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=DisplayCanvas, Path=IsChecked}" Value="True">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=DisplayCanvas, Path=IsChecked}" Value="False">
                            <Setter Property="Visibility" Value="Hidden" />
                        </DataTrigger>

                    </Style.Triggers>
                </Style>
            </Path.Style>
        </Path>
        <Path Data="M0,10 L5,0 L10,10" Stroke="White" StrokeThickness="2" HorizontalAlignment="Center" Canvas.Left="102" Height="8" Canvas.Top="23.733" Stretch="Fill" Width="15" RenderTransformOrigin="0.5,0.5">
            <Path.Style>
                <Style TargetType="Path">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=DisplayCanvas, Path=IsChecked}" Value="True">
                            <Setter Property="Visibility" Value="Hidden" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=DisplayCanvas, Path=IsChecked}" Value="False">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                        <EventTrigger RoutedEvent="Path.Loaded">
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" BeginTime="0:0:0" Duration="0:0:1" RepeatBehavior="Forever"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </Path.Style>
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="181.918"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>

        <Button Content="" Height="30" Width="65"
                Background="Transparent" BorderBrush="Transparent" Canvas.ZIndex="1" Cursor="Hand" Canvas.Top="128">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <i:InvokeCommandAction 
                        Command="{Binding Help}"
                        CommandParameter="{Binding RelativeSource= {RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=DataContext}">
                    </i:InvokeCommandAction>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Image Source="../Images/Button/help.png" Height="30" Width="30" Canvas.Top="128"></Image>
        <Label Content="Help" VerticalAlignment="Center" Canvas.Left="32" Canvas.Top="131" Foreground="White"></Label>

        <Canvas Visibility="{Binding IsChecked, ElementName=DisplayCanvas, Converter={StaticResource InverseBooleanToVisibilityConverter}}" Name="CustomisationCanvas">
            <Button Content="" Height="30" Width="71" Canvas.Top="57"
                Background="Transparent" BorderBrush="Transparent" Canvas.ZIndex="1" Cursor="Hand" Canvas.Left="44">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <i:InvokeCommandAction 
                        Command="{Binding CustomiseAvatar}"
                        CommandParameter="{Binding RelativeSource= {RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=DataContext}">
                        </i:InvokeCommandAction>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
            <Image Source="../Images/Button/customise.png" Height="30" Width="30" Canvas.Top="56" Canvas.Left="44"></Image>
            <Label Content="Avatar" VerticalAlignment="Center" Canvas.Left="74" Canvas.Top="60" Foreground="White"></Label>

            <Button Content="" Height="30" Width="71" Canvas.Top="97" 
                Background="Transparent" BorderBrush="Transparent" Canvas.ZIndex="1" Cursor="Hand" Canvas.Left="44">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <i:InvokeCommandAction 
                        Command="{Binding CustomiseSkin}"
                        CommandParameter="{Binding RelativeSource= {RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=DataContext}">
                        </i:InvokeCommandAction>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
            <Image Source="../Images/Button/customise.png" Height="30" Width="30" Canvas.Top="97" Canvas.Left="44"/>
            <Label Content="Skin" VerticalAlignment="Center" Canvas.Left="74" Canvas.Top="100" Foreground="White"/>
        </Canvas>

    </Canvas>

我需要做的是当显示画布时，我需要向下移动HelpButton，当它被隐藏时，将HelpButton移回。这可能吗？几乎像ContextMenu。

Answer 1

您可以尝试使用绑定到Button的{​​{1}}属性的Visibility样式，并设置Canvas的{​​{1}}附加属性：

Canvas.Top

Answer 2

我认为你的布局太复杂了

这是一个更简单的示例，它使用切换来显示和隐藏内容

<StackPanel>
    <HeaderedContentControl >
        <HeaderedContentControl.Header>
            <ToggleButton x:Name="toggleShow">Show/Hide</ToggleButton>
        </HeaderedContentControl.Header>
        <StackPanel Visibility="{Binding IsChecked, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=toggleShow}">
            <Label>test</Label>
            <Label>test</Label>
            <Label>test</Label>
        </StackPanel>
    </HeaderedContentControl>
    <Label>help</Label>

</StackPanel>