代码之家  ›  专栏  ›  技术社区  ›  Matt McManis

在组合框中绑定颜色预览方块

  •  0
  • Matt McManis  · 技术社区  · 6 年前

    我正在尝试用文本项和每个文本项旁边的彩色框制作一个 组合框。

    我想将一个 数组 的颜色绑定到一个 组合框.itemtemplate. border. background.

    • [红]苹果
    • [绿]梨
    • [紫色]葡萄
      • 我在photoshop中做了这个例子:


        问题

        但是,背景色不显示。

        它可以是一个 列表,而不是一个 数组,但我不知道要使用哪种颜色方法, color>, colors>, brush>, brush>, brush>, solidcolorbrush>, string and how to get i t to bind and display properly.

        我是从这里得到这个想法的 但这会绑定到组合框中的文本颜色名称。如果单词不是颜色,它将显示为空。


        c_

        public static solidcolorbrush[]_cbocolor_previews=new solidcolorbrush[]。{
        新SolidColorBrush(颜色.红色),
        新SolidColorBrush(颜色.绿色),
        新的solidcolorbrush(colors.purple),
        }(二)
        public static solidcolorbrush[]cbocolor_预览
        {
        获取返回颜色预览;
        设置_cbocolor_previews=value;
        }
        

        xaml

        <comboBox:name=“cboColors”
        HorizontalSignment=“左”
        margin=“0,2,0,0”
        VerticalAlignment=“顶部”
        宽度=100”
        height=“22”>
        
        <ComboBox.itemTemplate>
        <数据模板>
        <网格>
        <grid.columndefinitions>
        <columnDefinition width=“自动”/>
        <列定义/>
        </grid.columndefinitions>
        
        <border background=“绑定cbocolor_预览”
        height=“12”
        width=“12”
        margin=“2”/>
        <textBlock grid.column=“1”
        margin=“5,0”
        VerticalAlignment=“中心”
        text=“绑定”/>
        </grid>
        </datatemplate>
        </ComboBox.itemTemplate>
        
        <system:string>苹果</system:string>
        <system:string>梨</system:string>
        <system:string>葡萄色</system:string>
        </ComboBox>
        ComboBox.ItemTemplateBorderBackground.

        • [红]苹果
        • [绿]梨
        • [紫色]葡萄

        我在photoshop中做了这个例子:

        Color Combobox


        问题

        但是,背景色不显示。

        可能是一个List而不是数组但是我不知道用什么颜色的方法,Color,Colors,请Brush,Brushes,请SolidColorBrush,String以及如何使其正确绑定和显示。

        我是从这里得到这个主意的https://stackoverflow.com/a/51096379/6806643
        但这会绑定到组合框中的文本颜色名称。如果单词不是颜色,它将显示为空。


        C#

        public static SolidColorBrush[] _cboColor_Previews = new SolidColorBrush[] {
            new SolidColorBrush(Colors.Red),
            new SolidColorBrush(Colors.Green),
            new SolidColorBrush(Colors.Purple),
        };
        public static SolidColorBrush[] cboColor_Previews
        {
            get { return _cboColor_Previews; }
            set { _cboColor_Previews = value; }
        }
        

        XAML公司

        <ComboBox x:Name="cboColors" 
                  HorizontalAlignment="Left"
                  Margin="0,2,0,0" 
                  VerticalAlignment="Top" 
                  Width="100"
                  Height="22" >
        
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
        
                        <Border Background="{Binding cboColor_Previews}" 
                                Height="12" 
                                Width="12" 
                                Margin="2"/>
                        <TextBlock Grid.Column="1" 
                                   Margin="5,0" 
                                   VerticalAlignment="Center" 
                                   Text="{Binding}"/>
                    </Grid>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        
            <System:String>Apple</System:String>
            <System:String>Pear</System:String>
            <System:String>Grape</System:String>
        </ComboBox>
        
    1 回复  |  直到 6 年前
        1
  •  1
  •   Sach    6 年前

    您不需要定义画笔。

    我会定义一个类来代表你的水果,就像这样:

    公共类水果 { 公共串果获取;设置; 公共颜色获取;设置; 公共字符串colorstr get return color.toString(); 公共水果(串果、彩色) { 水果=水果; 颜色=颜色; } }

    colorclass是system.windows.media.colorclass。当您在xaml中进行绑定时,binding to ahexstring that representative the color works,andcolor.toString()does just that.

    所以现在我有一个你的fruitsclass:。

    public-partial-class-mainwindow:window
    {
    公共列表<水果>水果列表获取;设置;
    
    公共主窗口()
    {
    初始化组件();
    
    水果列表=新列表<水果>()
    {
    新水果(“苹果”,颜色,红色)
    新水果(“梨”,颜色,绿色),
    新水果(“葡萄”,颜色,紫色)
    }(二)
    
    cboColors.itemssource=结果列表;
    }
    }
    

    如上图所示,将ComboBox.itemssource设置到我们的列表。

    您的组合框绑定应该如下所示:

    <comboBox:name=“cboColors”horizontallight=“center”margin=“0,20,0,0”
    VerticalAlignment=“Top”width=“100”height=“22”>
    <ComboBox.itemTemplate>
    <数据模板>
    <网格>
    <grid.columndefinitions>
    <columnDefinition width=“自动”/>
    <列定义/>
    </grid.columndefinitions>
    
    <border background=“绑定颜色str”height=“12”width=“12”margin=“2”/>gt;
    <textBlock grid.column=“1”margin=“5,0”verticalalightment=“center”text=“绑定水果”/>gt;
    </grid>
    </datatemplate>
    </ComboBox.itemTemplate>
    </ComboBox>
    

    最终输出:


    编辑

    正在获取所选项目。此时,您的comboBox.itemssourceisboundto your水果列表list.因此,每当用户从下拉列表中选择一个项目时,都会选择一个类型为fruist的对象。

    因此,如果要选择项目,例如,可以使用组合框_selectionchangedevent,然后将组合框.selectedItem转换为type水果

    private void cbocolors_selectionchanged(object sender,selectionchangedeventargs e)
    {
    //将所选项目强制转换为类型水果
    var selected=(水果)cbocolors.selectedItem;
    //在这里,我将为所选水果设置窗口标题以进行说明。
    //您可以随意使用。
    this.title=选定的.fruit;
    }
    

    我认为,深入研究databinding的世界并学习基础知识是个好主意。 thisandthiscould be a good starting point.

    这个Color班级是System.Windows.Media.Color类。当你装订的时候XAML,绑定到Hex表示颜色工作的字符串,以及Color.ToString()就是这样。

    所以现在我有了你的名单Fruits等级:

    public partial class MainWindow : Window
    {
        public List<Fruits> FruitList { get; set; }
    
        public MainWindow()
        {
            InitializeComponent();
    
            FruitList = new List<Fruits>()
            {
                new Fruits("Apple", Colors.Red),
                new Fruits("Pear", Colors.Green),
                new Fruits("Grape", Colors.Purple)
            };
    
            cboColors.ItemsSource = FruitList;
        }
    }
    

    集合ComboBox.ItemsSource如上图所示。

    还有你的ComboBox绑定应如下所示:

    <ComboBox x:Name="cboColors" HorizontalAlignment="Center" Margin="0,20,0,0" 
              VerticalAlignment="Top" Width="100" Height="22">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
    
                    <Border Background="{Binding ColorStr}" Height="12" Width="12" Margin="2"/>
                    <TextBlock Grid.Column="1" Margin="5,0" VerticalAlignment="Center" Text="{Binding Fruit}"/>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
    

    最终输出:

    enter image description here


    编辑

    正在获取所选项目。此时,您的ComboBox.items源跳跃给你的FruitList列表。因此,每当用户从下拉列表中选择一个项目时,类型为的对象Fruist正在选择。

    因此,如果要选择项,可以使用ComboBox_SelectionChanged事件,并将ComboBox.SelectedIteminto类型水果.

    private void CboColors_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // Casting the selected item to type Fruits
        var selected = (Fruits)cboColors.SelectedItem;
        // Here I'm setting window title to the selected fruit to illustrate.
        // You can use this however you like.
        this.Title = selected.Fruit;
    }
    

    我认为对你来说,潜入DataBinding学习基础知识。 Thisthis可能是一个很好的起点。