Search code examples
wpfbindingdatatemplate

In WPF datatemplate, What I missed? data doesn't show correctly


  1. I use a class 'SecondCondition' as basic data unit. It have 3 public property. ConditionColor, ConditionName, ConditionID
  2. ObservableCollection 'SearchConditionList' is used as data list.
  3. I made a datatemplate Binding like below.
    < Model:SearchCondition x:Key="SearchCondition" />  
    < DataTemplate x:Key="ConditionSelector">
        < StackPanel >
            < xctk:ColorPicker  x:Name="ConditionColorPicker" 
                                SelectedColor="{Binding Path=ConditionColor, 
                                Mode=TwoWay}">  
            < /xctk:ColorPicker>  
            < CheckBox x:Name="ConditionCheckbox" 
                       Content="{Binding Path=ConditionName,  
                       Mode=TwoWay}" />  
        < /StackPanel>
  1. And I used the datatemplate at my Listbox.
    < ListBox    ItemsSource="{Binding Path=SearchConditionList}"
                ItemTemplate="{StaticResource ConditionSelector}">  
    < /ListBox> 

As result, I get number of blank template as much as List of items. But it doesn't show properties like color and name. What I used as reference article use almost same and the code works, but mine is not. How can I solve this?

below is my reference. https://learn.microsoft.com/ko-kr/dotnet/framework/wpf/data/data-templating-overview

Thank you.

P.S When I change codes like below, constant strings are shown very well but Bound value are not.

                    <StackPanel DataContext="{Binding Path=SearchConditionList}">
                        <ListBox    ItemsSource="{Binding}"
                                    >
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock>
                                        <TextBlock Text="Why this doens't show bound value?"/>
                                        <TextBlock Text=" : " />
                                        <TextBlock Text="{Binding Path=ConditionName}"/>
                                    </TextBlock>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </StackPanel>

result is like below.

enter image description here


Solution

  • Here is my implementation based on your source code.

    Model

    public class SearchCondition
    {
        public Color ConditionColor { get; set; }
        public string ConditionName { get; set; }
        public string ConditionID { get; set; }
    
        public SearchCondition(Color color, string name, string id)
        {
            ConditionColor = color;
            ConditionName = name;
            ConditionID = id;
        }
    }
    

    ViewModel

    public class ViewModel
    {
        public ObservableCollection<SearchCondition> SearchConditionList { get; set; }
    
        public ViewModel()
        {
            SearchConditionList = new ObservableCollection<SearchCondition>();
    
            SearchConditionList.Add(new SearchCondition(Colors.Red, "Red", "001"));
            SearchConditionList.Add(new SearchCondition(Colors.Green, "Green", "002"));
        }
    }
    

    The ViewModel is bound to the view in the code-behind.

    public MainWindow()
        {
            InitializeComponent();
    
            DataContext = new ViewModel();
        }
    

    Okay.. now this is the XAML.

    <Window x:Class="DataBindingTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="ConditionSelector">
                <StackPanel Orientation="Horizontal">
                    <xctk:ColorPicker x:Name="ConditionColorPicker" SelectedColor="{Binding Path=ConditionColor, Mode=TwoWay}" />
                    <CheckBox x:Name="ConditionCheckbox" Content="{Binding Path=ConditionName, Mode=TwoWay}" />
                </StackPanel>
            </DataTemplate>
        </Grid.Resources>
    
        <ListBox ItemsSource="{Binding Path=SearchConditionList}" ItemTemplate="{StaticResource ConditionSelector}" />
    </Grid>
    

    Screenshot

    Honestly, I can't figure out where the problem is unless I see your full source code. Visual Studio doesn't spit out exceptions explicitly. But you should be able to see the binding error in the output window. So you can find the clue.

    Please compare your implementation with mine.