WPF自定义形状列表框

Question

我想创建一个WPF中的自定义形状列表框，我将用它来显示一些东西。我需要它看起来像云形（见附件）。什么是最简单的方法来实现这一点（在Blend中可以优先考虑）。非常感谢。

Answer 1

一种方式做，这将是只是有一个云图像（最好是SVG），并在其顶部掉落列表框上没有边界。

编辑：这是一个风格/模板的方式做这件事（你需要调整，使它看起来正是你想怎么）：

<Window x:Class="WpfApplication2.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="362" Width="574"> 

    <Window.Resources> 

     <!--Control colors.--> 
     <Color x:Key="WindowColor">#FFE8EDF9</Color> 
     <Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color> 
     <Color x:Key="ContentAreaColorDark">#FF7381F9</Color> 

     <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color> 
     <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color> 
     <Color x:Key="DisabledForegroundColor">#FF888888</Color> 

     <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color> 
     <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color> 

     <Color x:Key="ControlLightColor">White</Color> 
     <Color x:Key="ControlMediumColor">#FF7381F9</Color> 
     <Color x:Key="ControlDarkColor">#FF211AA9</Color> 

     <Color x:Key="ControlMouseOverColor">#FF3843C4</Color> 
     <Color x:Key="ControlPressedColor">#FF211AA9</Color> 


     <Color x:Key="GlyphColor">#FF444444</Color> 
     <Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color> 

     <!--Border colors--> 
     <Color x:Key="BorderLightColor">#FFCCCCCC</Color> 
     <Color x:Key="BorderMediumColor">#FF888888</Color> 
     <Color x:Key="BorderDarkColor">#FF444444</Color> 

     <Color x:Key="PressedBorderLightColor">#FF888888</Color> 
     <Color x:Key="PressedBorderDarkColor">#FF444444</Color> 

     <Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color> 
     <Color x:Key="DisabledBorderDarkColor">#FF888888</Color> 

     <Color x:Key="DefaultBorderBrushDarkColor">Black</Color> 

     <!--Control-specific resources.--> 
     <Color x:Key="HeaderTopColor">#FFC5CBF9</Color> 
     <Color x:Key="DatagridCurrentCellBorderColor">Black</Color> 
     <Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color> 

     <Color x:Key="NavButtonFrameColor">#FF3843C4</Color> 

     <LinearGradientBrush x:Key="MenuPopupBrush" 
        EndPoint="0.5,1" 
        StartPoint="0.5,0"> 
      <GradientStop Color="{DynamicResource ControlLightColor}" 
       Offset="0" /> 
      <GradientStop Color="{DynamicResource ControlMediumColor}" 
       Offset="0.5" /> 
      <GradientStop Color="{DynamicResource ControlLightColor}" 
       Offset="1" /> 
     </LinearGradientBrush> 

     <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" 
        StartPoint="0,0" 
        EndPoint="1,0"> 
      <LinearGradientBrush.GradientStops> 
       <GradientStopCollection> 
        <GradientStop Color="#000000FF" 
        Offset="0" /> 
        <GradientStop Color="#600000FF" 
        Offset="0.4" /> 
        <GradientStop Color="#600000FF" 
        Offset="0.6" /> 
        <GradientStop Color="#000000FF" 
        Offset="1" /> 
       </GradientStopCollection> 
      </LinearGradientBrush.GradientStops> 
     </LinearGradientBrush> 

     <Style x:Key="{x:Type ListBox}" 
     TargetType="ListBox"> 
      <Setter Property="SnapsToDevicePixels" 
      Value="true" /> 
      <Setter Property="OverridesDefaultStyle" 
      Value="true" /> 
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" 
      Value="Auto" /> 
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" 
      Value="Auto" /> 
      <Setter Property="ScrollViewer.CanContentScroll" 
      Value="true" /> 
      <Setter Property="MinWidth" 
      Value="120" /> 
      <Setter Property="MinHeight" 
      Value="95" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ListBox"> 


         <!-- This is the meat of the template -->  
         <Grid> 
          <Image Stretch="Fill" Source="/WpfApplication2;component/Cloud.png" /> 

          <StackPanel Margin="2" Background="Transparent" 
            IsItemsHost="True" /> 

         </Grid>  

         <ControlTemplate.Triggers> 
          <Trigger Property="IsEnabled" 
        Value="false"> 

          </Trigger> 
          <Trigger Property="IsGrouping" 
        Value="true"> 
           <Setter Property="ScrollViewer.CanContentScroll" 
        Value="false" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 


    </Window.Resources> 

    <Grid Background="Azure"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 


     <Grid VerticalAlignment="Top" HorizontalAlignment="Left" Width="Auto" Height="Auto"> 

      <ListBox 

       x:Name="ListBox1" 
       VerticalAlignment="Top" 
       HorizontalAlignment="left" 
       Height="Auto" 
       Width="Auto" 
       Background="Red" > 


      </ListBox> 

     </Grid> 

    </Grid> 
</Window> 

我引用这个MSDN page来与此（因为我没有混合安装）。