locked
Simple ComboBox Binding Question in Windows 8 RRS feed

  • Question

  • List<int> LineWidthList and int LineWidth are defined and populated in the code-behind for the XAML below, but the control is not populated. When I click the control at run-time, it just goes blank.

    If I set the ComboBox ItemsSource and SelectedItem properties in the code-behind rather than in the XAML, the control is populated and works as expected. I really need to understand why the binding isn't working in XAML.

    Thanks....

    <ComboBox x:Name="cboLineWidth"
             Grid.Row="3" Grid.Column="0"
             Width="200" Height="40"
             Margin="10"
             ItemsSource="{Binding Path=LineWidthList}"
             SelectedItem="{Binding Path=LineWidth}"/>


    Randy

    Tuesday, October 1, 2013 3:32 PM

Answers

  • Hello!

    Read about MVVM pattern in winRT app development.

    For add DataContext from xaml, you need to create other class "MainViewModel" and add it to page resources as StaticResource.

    Here are code:

    MainViewModel:

    public class MainViewModel : INotifyPropertyChanged
        {
            private List<int> comboboxItems;
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            public MainViewModel()
            {
                this.ComboboxItems = new List<int>()
                {
                    1,2,3,4,5,6,7
                };
            }
    
    
            public List<int> ComboboxItems
            {
                get { return comboboxItems; }
                set
                {
                    comboboxItems = value;
                    this.RaiseProperty();
                }
            }
    
            public void RaiseProperty([CallerMemberName] string property = "")
            {
                if (this.PropertyChanged != null)
                {
                    this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(property));
                }
            }
        }

    MainPage.xaml:

    <Page
        x:Class="App2.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App2"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <local:MainViewModel x:Name="MainViewModel"/>
        </Page.Resources>
        <Page.DataContext>
            <Binding Source="{StaticResource MainViewModel}"/>
        </Page.DataContext>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ComboBox ItemsSource="{Binding ComboboxItems}"
                      Width="200" Height="90" Background="Gray"/>
        </Grid>
    </Page>

    Tuesday, October 1, 2013 5:20 PM

All replies

  • I'll answer my own question and ask another. The problem above is fixed by adding the following line to the code-behind constructor:

    DataContext = this;

    If I take this line out of the code-behind constructor and add it to the XAML code, it stops working. How do I set the DataContext for the entire XAML file in XAML.

    Thanks...


    Randy

    Tuesday, October 1, 2013 3:41 PM
  • Hello!

    Read about MVVM pattern in winRT app development.

    For add DataContext from xaml, you need to create other class "MainViewModel" and add it to page resources as StaticResource.

    Here are code:

    MainViewModel:

    public class MainViewModel : INotifyPropertyChanged
        {
            private List<int> comboboxItems;
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            public MainViewModel()
            {
                this.ComboboxItems = new List<int>()
                {
                    1,2,3,4,5,6,7
                };
            }
    
    
            public List<int> ComboboxItems
            {
                get { return comboboxItems; }
                set
                {
                    comboboxItems = value;
                    this.RaiseProperty();
                }
            }
    
            public void RaiseProperty([CallerMemberName] string property = "")
            {
                if (this.PropertyChanged != null)
                {
                    this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(property));
                }
            }
        }

    MainPage.xaml:

    <Page
        x:Class="App2.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App2"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <local:MainViewModel x:Name="MainViewModel"/>
        </Page.Resources>
        <Page.DataContext>
            <Binding Source="{StaticResource MainViewModel}"/>
        </Page.DataContext>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ComboBox ItemsSource="{Binding ComboboxItems}"
                      Width="200" Height="90" Background="Gray"/>
        </Grid>
    </Page>

    Tuesday, October 1, 2013 5:20 PM