ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

c# – 在一个WPF ComboBox中使用三种不同的ComboBoxItem样式

2019-07-17 14:05:38  阅读:786  来源: 互联网

标签:c combobox wpf xaml


所以我正在尝试为我正在处理的应用程序创建用户控件.它基本上是ComboBox旁边的ToggleButton.我能够像设计师想要的那样在VS2015中模拟用户控件的ComboBox部分,但我觉得我的方式并不是最好的方式.

首先,这是一个链接到它的外观截图:
https://www.dropbox.com/s/019f4xqgu8r4i0e/DropDown.png

为此,我最终创建了3种不同的ComboBoxItem样式.第一个将CheckBox,带有ContentPresenter的TextBlock和一个Rectangle放在一起.第二个只有一个Separator,而最后一个只有TextBlock和ContentPresenter.这是我的XAML,它在UserControl.Resources部分中声明:

<Style x:Key="cbTestStyle" TargetType="{x:Type ComboBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBoxItem">
                <Border Name="Border"
                        Padding="5"
                        Margin="2"
                        BorderThickness="2"
                        CornerRadius="0"
                        BorderBrush="Transparent">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="75"/>
                            <ColumnDefinition Width="15"/>
                        </Grid.ColumnDefinitions>
                        <CheckBox Grid.Column="0"
                                  IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource TemplatedParent}}"/>
                        <TextBlock Grid.Column="1"
                                   TextAlignment="Left"
                                   Foreground="Black">
                            <ContentPresenter/>
                        </TextBlock>
                        <Rectangle Grid.Column="2"
                                   Stroke="Black"
                                   Width="15"
                                   Height="15"
                                   Fill="{TemplateBinding Foreground}"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" Value="True">
                        <Setter TargetName="Border" Property="BorderBrush" Value="Gray"/>
                        <Setter TargetName="Border" Property="Background" Value="LightGray"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="cbSeparatorStyle" TargetType="ComboBoxItem">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Separator/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="cbResetStyle" TargetType="{x:Type ComboBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBoxItem">
                <Border x:Name="Border"
                        Padding="5"
                        Margin="2"
                        BorderThickness="2"
                        CornerRadius="0"
                        BorderBrush="Transparent">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="1">
                            <ContentPresenter/>
                        </TextBlock>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" Value="True">
                        <Setter TargetName="Border" Property="BorderBrush" Value="Gray"/>
                        <Setter TargetName="Border" Property="Background" Value="LightGray"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我想我的第一个问题是,这是让我的ComboBox看起来像我提供的截图的最佳方法吗?

当然,还有一些我尚未解决的问题.首先,我希望能够动态填充ComboBoxItem的cbTestStyle.数据绑定将是我明显的选择,但最后使用分隔符和“重置”样式,我不知道如何做到这一点.我目前在XAML中使用ComboBoxItems“硬编码”:

    <ComboBox x:Name="cbTestSelect"
              Height="34"
              Width="18" 
              IsEnabled="False">
        <ComboBoxItem Style="{StaticResource cbTestStyle}" Content="Test 1" Foreground="#7FFF0000" Selected="ComboBoxItem_Selected"/>
        <ComboBoxItem Style="{StaticResource cbTestStyle}" Content="Test 2" Foreground="#7F00FF00" Selected="ComboBoxItem_Selected"/>
        <ComboBoxItem Style="{StaticResource cbTestStyle}" Content="Test 3" Foreground="#7F0000FF" Selected="ComboBoxItem_Selected"/>
        <ComboBoxItem Style="{StaticResource cbSeparatorStyle}"/>
        <ComboBoxItem Style="{StaticResource cbResetStyle}" Content="Reset all"/>
    </ComboBox>

在这个例子中,我理想地想动态创建前三个项目并使分隔符和“重置”项保持静态.我还是WPF的新手.我觉得尝试在WinForms中创建这个控件(这个用户控件将使用的应用程序)将会复杂得多.另外,我正试图引导我们更多地使用WPF.

任何帮助或链接到其他问题或在线教程将不胜感激.

解决方法:

解决方案1:

使用CompositeCollection以便您可以使用DataBinding调出数据项,并使用常规XAML定义硬编码项:

<Window x:Class="WpfApplication31.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication31"
        Title="MainWindow" Height="350" Width="525"
        x:Name="view">
    <Window.Resources>
        <DataTemplate DataType="{x:Type local:DataItem}">
            <StackPanel Orientation="Horizontal">
                <CheckBox IsChecked="{Binding IsChecked}"/>
                <TextBlock Text="{Binding Text}"/>
                <Rectangle Stroke="Black" StrokeThickness="1"
                           Fill="{Binding Color}" Width="20"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <ComboBox VerticalAlignment="Center"
                  HorizontalAlignment="Center"
                  Width="100" x:Name="Combo">
            <ComboBox.Resources>
                <CompositeCollection x:Key="ItemsSource">
                    <CollectionContainer Collection="{Binding DataContext,Source={x:Reference view}}"/>
                    <Separator Height="10"/>
                    <Button Content="Clear All"/>
                </CompositeCollection>
            </ComboBox.Resources>

            <ComboBox.ItemsSource>
                <StaticResource ResourceKey="ItemsSource"/>
            </ComboBox.ItemsSource>
        </ComboBox>
    </Grid>
</Window>

代码背后:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        var colors = new[] {"Red", "Green", "Blue", "Brown", "Cyan", "Magenta"};

        this.DataContext =
            Enumerable.Range(0, 5)
                .Select(x => new DataItem
                {
                    Text = "Test" + x.ToString(),
                    Color = colors[x],
                    IsChecked = x%2 == 0
                });

    }
}

数据项:

public class DataItem
{
    public bool IsChecked { get; set; }

    public string Text { get; set; }

    public string Color { get; set; }
}

结果:

enter image description here

标签:c,combobox,wpf,xaml
来源: https://codeday.me/bug/20190717/1489079.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有