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來與此（因爲我沒有混合安裝）。