WPF边界形状

Question

我想创建这样的Lync 2013有一个弹出：

什么I'm兴趣，是创造与暗角形状的控制。

我已经尝试创建一个用户控件与画布里面和形状的路径。但是我没有发现Canvas非常友好，所以我想知道是否可以通过Border控件“玩”来实现这一点，以便只放入一个边框，然后放入一个网格。

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

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

你显然需要一些漂亮的图片做为按钮和一些更好的东西放在堆叠面板，所以弹出窗口看起来不错，但应该做的工作:) 你必须小心的是弹出的位置，这意味着如果你通过添加更多的东西你需要更改弹出窗口的高度改变“CustomPopupPl”的值acement“对象，可能有一个很好的方法来解决这个问题？

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> 

我的例子有两个按钮，重要的是这个例子是第一个1（这是一个精灵般的UI的一部分，但你可以忽略第二个按钮）。

我没有视图模型这里，但机制简单，设置 - 按钮结合对财产ToggleSettingsVisibility这台SettingsVisibility弹出结合对。这一切对于这个例子来说并不重要。

结果看起来是这样的：

当然，我还是要对造型;-)