Combobox itemtemplate和string或comboboxitem

Question

需要在wpf中使用comboboxitems的小修補程序。我想顯示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

第一個問題是網格列索引爲0的基於 - 裝置，圖像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重複最簡單的方法 - 在使用組合框項目，我不preffer這條路......

<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.行&列與指數0開始; 2. TextBlock需要設置文本屬性，以便它可以顯示。

如果你只是想顯示相同的圖標， 此代碼將要去工作（這可以解決您的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(); 
    } 
}