WPF Window内嵌子界面需求：点击标签弹出含Textbox的操作窗口

Hey there! I get that the built-in Popup control isn't checking all your boxes for this scenario—let's walk through some solid alternatives that'll let you build that click-triggered, fully functional sub-interface with TextBoxes, images, buttons, and all the interactivity you need.

Option 1: Use the Flyout Control (Lightweight & Tied to Your Label) #

If you want a clean, native-feeling popup that's directly linked to your label (with built-in positioning and animation), the Flyout control (available in WPF 4.5+) is perfect. It supports any content you throw at it, and automatically attaches to your trigger element.

XAML Example #

<Label Content="Click to Open Sub-Interface" 
       x:Name="TriggerLabel"
       MouseDown="TriggerLabel_MouseDown">
    <FlyoutBase.AttachedFlyout>
        <Flyout Placement="Bottom" Width="320" Height="240">
            <StackPanel Padding="12" Spacing="8">
                <TextBox PlaceholderText="Enter your input here" />
                <Image Source="your-image-file.png" Width="120" Height="120" HorizontalAlignment="Center" />
                <Button Content="Submit" HorizontalAlignment="Right" Click="SubmitButton_Click" />
            </StackPanel>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</Label>

Code-Behind to Trigger It #

private void TriggerLabel_MouseDown(object sender, MouseButtonEventArgs e)
{
    if (sender is FrameworkElement triggerElement)
    {
        FlyoutBase.ShowAttachedFlyout(triggerElement);
    }
}

This gives you a smooth, context-aware popup that stays tied to your label's position—no manual placement needed.

Option 2: Custom Non-Modal Window (Full Window Flexibility) #

If you need a more independent sub-interface (like one that can be dragged, minimized, or stays open while interacting with the main window), a custom tiny Window is the way to go.

Step 1: Create Your Sub-Window #

Make a new WPF Window (e.g., OperationSubWindow.xaml) with all your desired controls:

<Window x:Class="YourNamespace.OperationSubWindow"
        Title="Operation Panel"
        WindowStyle="ToolWindow"
        ResizeMode="NoResize"
        Width="320"
        Height="240">
    <StackPanel Padding="12" Spacing="8">
        <TextBox PlaceholderText="Enter input" />
        <Image Source="your-image.png" Width="120" Height="120" HorizontalAlignment="Center" />
        <Button Content="Confirm" HorizontalAlignment="Right" />
    </StackPanel>
</Window>

Step 2: Trigger It From Your Main Window #

Handle the label's click event to show the window, positioned right near the label:

private void TriggerLabel_Click(object sender, RoutedEventArgs e)
{
    var subWindow = new OperationSubWindow();
    subWindow.Owner = this; // Ties the sub-window to your main window

    // Position the window just below the label
    var labelScreenPos = TriggerLabel.PointToScreen(new Point(0, TriggerLabel.ActualHeight));
    subWindow.Left = labelScreenPos.X;
    subWindow.Top = labelScreenPos.Y;

    subWindow.Show(); // Non-modal, so main window stays interactive
}

This gives you all the flexibility of a full window, tailored to your small interface needs.

Option 3: Customize the Popup Control (If You Want to Stick With It) #

If you just need to fix the default Popup's limitations (like lack of styling or structure), you can completely customize its template to look and behave like a proper sub-interface.

Custom Popup XAML #

<Popup x:Name="CustomOperationPopup"
       PlacementTarget="{Binding ElementName=TriggerLabel}"
       Placement="Bottom"
       AllowsTransparency="True"
       StaysOpen="False">
    <!-- Custom styled container -->
    <Border Background="White"
            BorderBrush="#CCCCCC"
            BorderThickness="1"
            CornerRadius="4"
            Width="320"
            Height="240">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- Custom title bar -->
            <Border Background="#F5F5F5"
                    BorderBrush="#CCCCCC"
                    BorderThickness="0 0 0 1">
                <TextBlock Text="Operation Panel" Padding="10" FontWeight="SemiBold"/>
            </Border>

            <!-- Content area -->
            <StackPanel Grid.Row="1" Padding="12" Spacing="8">
                <TextBox PlaceholderText="Enter input" />
                <Image Source="your-image.png" Width="120" Height="120" HorizontalAlignment="Center" />
                <Button Content="Submit" HorizontalAlignment="Right" Click="SubmitButton_Click" />
            </StackPanel>
        </Grid>
    </Border>
</Popup>

Trigger It With a Click #

private void TriggerLabel_Click(object sender, RoutedEventArgs e)
{
    CustomOperationPopup.IsOpen = !CustomOperationPopup.IsOpen;
}

This transforms the basic Popup into a styled, functional panel that matches your desired look and feel.

Pick the option that best fits your needs: Flyout for tight integration, custom Window for independence, or a customized Popup if you prefer sticking with that control.

内容的提问来源于stack exchange，提问作者iNex