Question

需要在wpf中使用comboboxitems进行小修复。我想显示组合框，或者在comboxbox（textblock）中显示旁边的图像。我做不到。有人可以帮我解决这个问题吗？

提前致谢

   <ComboBox Name="avilibity" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1">
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="25"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="1" Source="/resources/icon.png" ></Image>
                            <TextBlock FontSize="14" Grid.Column="2" ></TextBlock>
                        </Grid>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
                <sys:String>Available</sys:String>
                <sys:String>Offline</sys:String>
                <sys:String>Away</sys:String>
            </ComboBox>

Answer 1

第一个问题是Grid Column索引是基于0的 - 意味着Image shold有Grid.Column =“0”，TextBlock =“1”。

它是不是总是相同的图像？考虑使用用户定义的对象作为绑定属性。因此，您可以拥有单独的图标。

可能是这里的一位大师可以提供仅限XAML的示例......我只能想象代码背后......

这里有两种可能的解决方案：

C＃中的代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;

namespace ListImageWithText
{
/// <summary>
/// Interaktionslogik für MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnNotifyPropertyChanged(String info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }

    private List<ImageWithText> _objectlist;


    public List<ImageWithText> ObjectList
    {
        get
        {
            return _objectlist;
        }

        set
        {
            _objectlist = value;
            OnNotifyPropertyChanged("ObjectList");
        }

    }

    public MainWindow()
    {
        InitializeComponent();

        ImageWithText iwt;
        this._objectlist = new List<ImageWithText>();

        iwt = new ImageWithText();
        iwt.Image = "App.ico";
        iwt.Text = "Away";
        this._objectlist.Add(iwt);

        iwt = new ImageWithText();
        iwt.Image = "App.ico";
        iwt.Text = "Available";
        this._objectlist.Add(iwt);

        iwt = new ImageWithText();
        iwt.Image = "App.ico";
        iwt.Text = "Offline";
        this._objectlist.Add(iwt);
        OnNotifyPropertyChanged("ObjectList");
    }
}

public class ImageWithText
{
    public string Image { get; set; }
    public string Text { get; set; }
}
}

使用两个公共属性定义小类，将这些对象的列表显示为属性并在XAML中使用绑定

    <ComboBox Name="avilibity"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              Grid.Column="1"
              ItemsSource="{Binding ObjectList, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}">


        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="25"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Source="{Binding Image}" />
                    <TextBlock FontSize="14" Grid.Column="1" Text="{Binding Text}"/>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>

    </ComboBox>

使用XAML重复的最简单方法是使用ComboBox项目，我不会这样做...

    <ComboBox Name="avilibity"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              Grid.Column="1">

        <ComboBoxItem>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="25"/>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="App.ico" ></Image>
                <TextBlock FontSize="14" Grid.Column="1" >Available</TextBlock>
            </Grid>
        </ComboBoxItem>

        <ComboBoxItem>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="25"/>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="App.ico" ></Image>
                <TextBlock FontSize="14" Grid.Column="1" >Offline</TextBlock>
            </Grid>
        </ComboBoxItem>

        <ComboBoxItem>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="25"/>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="App.ico" ></Image>
                <TextBlock FontSize="14" Grid.Column="1" >Away</TextBlock>
            </Grid>
        </ComboBoxItem>
    </ComboBox>

Answer 2

您的代码中几乎没有错误： 1. Row＆amp;列以索引0开始; 2. TextBlock需要设置Text Property，以便它可以显示。

如果您只想显示相同的图标，这段代码将会起作用（这可以修复你的perblom）：

<ComboBox Name="avilibity" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1">
   <ComboBox.ItemTemplate>
         <DataTemplate>
              <Grid>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="25"/>
                      <ColumnDefinition Width="*" />
                   </Grid.ColumnDefinitions>
               <Image Grid.Column="0" Source="/resources/icon.png" ></Image>
                        <TextBlock FontSize="14" Grid.Column="1"  Text="{Binding}"></TextBlock>
               </Grid>
         </DataTemplate>
     </ComboBox.ItemTemplate>
     <sys:String>Available</sys:String>
     <sys:String>Offline</sys:String>
     <sys:String>Away</sys:String>
</ComboBox>

但正如我所看到的，有三种状态。也许你想在不同的项目显示时改变图像。

这是我的解决方案：

<Window.Resources>
    <converters:ImageSourceConverter x:Key="ImageSourceConverter" />
</Window.Resources>

<ComboBox Name="avilibity" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1">
   <ComboBox.ItemTemplate>
         <DataTemplate>
              <Grid>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="25"/>
                      <ColumnDefinition Width="*" />
                   </Grid.ColumnDefinitions>
               <Image Grid.Column="0" Source="{Binding Converter={StaticResource ImageSourceConverter}}" />
                        <TextBlock FontSize="14" Grid.Column="1"  Text="{Binding}"></TextBlock>
               </Grid>
         </DataTemplate>
     </ComboBox.ItemTemplate>
     <sys:String>Available</sys:String>
     <sys:String>Offline</sys:String>
     <sys:String>Away</sys:String>
</ComboBox>

ImageSourceConverter：

public class ImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return new BitmapImage(new Uri("/resources/" + value + ".png",UriKind.RelativeOrAbsolute));
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Combobox itemtemplate和string或comboboxitem

2 个答案: