WPF移动控件基于其他控件

Question

I've got the following <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>

What I need to do is when the canvas is displayed, I need to move the HelpButton down, when it is hidden, move the HelpButton back up.Is this possible? Almost like a ContextMenu.

Answer 1

You could try to use a Button style that binds to the Visibility property of the Canvas and sets the Canvas.Top attached property of the Button :

<Button Content="" Height="30" Width="65" Background="Transparent" BorderBrush="Transparent" Canvas.ZIndex="1" Cursor="Hand">
    <Button.Style>
        <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
            <Setter Property="Canvas.Top" Value="128" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Visibility, ElementName=CustomisationCanvas}" Value="Collapsed">
                    <Setter Property="Canvas.Top" Value="100" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
    <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>

Answer 2

i think your massively over complicating your layout

Here is a simpler example that uses a Toggle to show and hide content

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