WPF swing out an element

Question

Say we have a standard WPF-application, and I want to show some UI-elements on the left side besides my main application window.

Is there a way to go "beyond the borders" of the window and show a visual element with buttons on the left besides my main window? If there is, can you point me to a tutorial / video / hint how to accomplish it?

Answer 1

Popup maybe.

simple example:

<Window x:Class="WpfPopupTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
    <Popup HorizontalOffset="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" IsOpen="True">
        <StackPanel Background="HotPink">
            <TextBlock Text="Hey from outside!" Foreground="Gold" />
            <Button>Button!</Button>
        </StackPanel>
    </Popup>
</Grid>

Probably don't what you want to do, but i think that it could work for you.

Answer 2

Not sure if you're aiming to do all of this in code or in XAML, but using a Popup, you could do something like this?

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonsOnPopup.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="400" Height="300">
<Window.Resources>
    <Storyboard x:Key="OnMouseLeftButtonDown1">
        <BooleanAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="popup" Storyboard.TargetProperty="(Popup.IsOpen)">
            <DiscreteBooleanKeyFrame KeyTime="0" Value="True"/>
        </BooleanAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="OnClick1">
        <BooleanAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="popup" Storyboard.TargetProperty="(Popup.IsOpen)">
            <DiscreteBooleanKeyFrame KeyTime="0" Value="True"/>
            <DiscreteBooleanKeyFrame KeyTime="00:00:00.2" Value="False"/>
        </BooleanAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="textBlock">
        <BeginStoryboard Storyboard="{StaticResource OnMouseLeftButtonDown1}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
        <BeginStoryboard x:Name="OnClick1_BeginStoryboard" Storyboard="{StaticResource OnClick1}"/>
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
    <Popup x:Name="popup" Placement="Left">
        <StackPanel Background="White">
            <TextBlock Text="Outside Window" TextWrapping="Wrap"/>
            <Button x:Name="button" Width="75" Content="Close this"/>
        </StackPanel>
    </Popup>
    <TextBlock x:Name="textBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Text="MouseDown here" TextWrapping="Wrap" Background="#FFBFFFBD"/>
</Grid>

Hope this helps.

Answer 3

You could use a non-modal dialog with no window border. It could then appear to be floating out in space if you want.

Cory