WPF 边框形状

Question

我想创建一个类似于 Lync 2013 的弹出窗口：

我感兴趣的是创建一个具有该晕影形状的控件。

我尝试创建一个内部带有 Canvas 和带有形状的 Path 的 UserControl。但是我发现 Canvas 不是很友好，所以我想知道我是否可以通过“玩”边框控件来实现这一点，以便在里面只放一个边框，然后放一个网格。

这可能吗？有人可以帮助我走上正轨吗？

Answer 1

这是我的 XAML：

<Window x:Class="CustomBorderStyle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        LocationChanged="Window_LocationChanged"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Border BorderBrush="Silver" BorderThickness="1">
            <Button Content="Nice image button" Name="btnThingToClick" Width="100" Height="100" Click="btnThingToClick_Click" />
        </Border>
        <Popup Name="myPopup"
              AllowsTransparency="True"
              PlacementTarget ="{Binding ElementName=btnThingToClick}" 
              Placement="Custom">
            <Grid x:Name="grid" Height="200" Width="200" Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="40"/>
                </Grid.RowDefinitions>
                <Border BorderBrush="Silver" BorderThickness="1" Background="White" CornerRadius="5" Grid.Row="0" Padding="5">
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="Some stuff" />
                        <Button Content="Click me" Width="50" />
                    </StackPanel>
                </Border>
                <Path Fill="White" Stretch="Fill" Stroke="Silver" HorizontalAlignment="Left" Margin="30,-1.6,0,0" Width="25" Grid.Row="1" 
                     Data="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395"/>
            </Grid>
        </Popup>
    </Grid>
</Window>

这是我的主窗口代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;

namespace CustomBorderStyle
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            //wire up the popup to the popup placement method
            myPopup.CustomPopupPlacementCallback = new CustomPopupPlacementCallback(placePopup);
        }

        private void btnThingToClick_Click(object sender, RoutedEventArgs e)
        {
            //just invert if it's open or not
            myPopup.IsOpen = !myPopup.IsOpen;
        }


        //this is to position the popup next to the button
        public CustomPopupPlacement[] placePopup(Size popupSize,
                                           Size targetSize,
                                           Point offset)
        {
            CustomPopupPlacement placement1 =
               new CustomPopupPlacement(new Point(10, -200), PopupPrimaryAxis.Vertical);

            CustomPopupPlacement placement2 =
                new CustomPopupPlacement(new Point(10, 20), PopupPrimaryAxis.Horizontal);

            CustomPopupPlacement[] ttplaces =
                    new CustomPopupPlacement[] { placement1, placement2 };
            return ttplaces;
        }
        private void Window_LocationChanged(object sender, System.EventArgs e)
        {
            //if the popup is open when the window's location changes
            if (myPopup.IsOpen)
            {
                //toggle the popup to redraw the location
                myPopup.IsOpen = false;
                myPopup.IsOpen = true;
            }
        }
    }
}

您显然需要一些漂亮的图像来用于按钮，并需要一些更好的东西放在堆栈面板中，以便弹出窗口看起来不错，但这应该可以完成工作:) 您需要注意的是弹出窗口的位置，这意味着如果您通过添加更多内容来更改弹出窗口的高度，您需要更改“CustomPopupPlacement”对象的值，可能有一个很好的修复方法这个？？

Answer 2

我只是想粘贴一些适合我的代码：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Popup Placement="Top" 
           IsOpen="{Binding SettingsVisible}" 
           PopupAnimation="Fade" 
           AllowsTransparency="True">
        <Grid Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Border Grid.Row="0" CornerRadius="10" Background="SkyBlue" HorizontalAlignment="Left">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0">Hello, world</TextBlock>
                    <Button Grid.Row="1">Click Me!</Button>
                </Grid>
            </Border>
            <Path Grid.Row="1" VerticalAlignment="Bottom" Data="M 10 0 L 20 10 L 30 0 Z" Fill="SkyBlue" />
        </Grid>
    </Popup>
    <Button Grid.Column="0" HorizontalAlignment="Left" Command="{Binding ToggleSettingsVisibility}">Settings</Button>
    <Button x:Uid="Button_1" IsEnabled="{Binding SettingsVisible}" Grid.Column="1" HorizontalAlignment="Right" Padding="30, 10" Command="{Binding Next}">Next</Button>
</Grid>

我的示例有两个按钮，对于这个示例很重要的是第一个按钮（它是类似向导的 UI 的一部分，但您可以忽略第二个按钮）。

我这里没有 ViewModel，但机制很简单，Settings-Button 绑定到属性 ToggleSettingsVisibility，该属性设置 SettingsVisibility em> Popup 绑定。对于示例来说，所有这些都不是很重要。

结果如下所示：

当然，我仍然需要处理样式；-)