WPF Custom Shaped Listbox - PullRequest
       2

WPF Custom Shaped Listbox

4 голосов
/ 22 февраля 2011

Я пытаюсь создать специальный список ListBox в WPF, который я буду использовать для отображения некоторых вещей. Мне нужно, чтобы он выглядел как облачность (см. Приложение). Какой самый простой способ добиться этого (предпочтительно в Blend). Большое спасибо.

Cloud Shape

1 Ответ

5 голосов
/ 22 февраля 2011

Один из способов сделать это состоит в том, чтобы просто иметь облачное изображение (предпочтительно 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 , чтобы придумать это (поскольку у меня не установлена ​​смесь).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...