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

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.