开发者

WPF Custom Shaped Listbox

I am trying to create a custom shaped开发者_高级运维 listBox in WPF which I will use to display some stuff. I need it to look something like a cloud shape (see attachment). What is the simplest way to achieve this (preffably in Blend). Many thanks.

WPF Custom Shaped Listbox


One way to do this would be to just have a cloud image (preferably SVG) and on top of that drop a list box with no border on it.

EDIT: Here is a styled / templated way to do the whole thing (you'll need to tweak to make it look exactly how you want):

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

I referenced this MSDN page to come up with this (as I don't have blend installed).

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜