locked
Data binding for CommandBar

    Question

  • Hi

    I built an app that have a command bar in top of screen, and I want it to bind to a list, the code in MainPage.xaml is as below:

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
        </Grid>
        <Page.TopAppBar>
            <CommandBar Name="bar">
                <CommandBar.ContentTemplate>
                    <DataTemplate>
                        <AppBarButton Width="100" Label="{Binding Name}" Click="MenuFlyoutItem_Click">
                            <Image Source="{Binding Path=Icon}" RequestedTheme="Dark"></Image>
                        </AppBarButton>
                    </DataTemplate>
                </CommandBar.ContentTemplate>
            </CommandBar>
        </Page.TopAppBar>

    and the code in MainPage.xaml.cs is as below:

            public List<UnitType> types = new List<UnitType>();
    
            public MainPage()
            {
                this.InitializeComponent();
                UnitType type = new UnitType();
                type.Name = "test";
                type.Icon = "/Assets/angle.png";
                types.Add(type);
                types.Add(type);
                bar.Content = types;
            }

    the class of UnitType:

        [DataContract]
        public class UnitType
        {
            
            string name;
            string icon;
    
            [DataMember]
            public string Name
            {
                get { return name; }
                set { name = value; }
            }
            [DataMember]
            public string Icon
            {
                get { return icon; }
                set { icon = value; }
            }
        }

    The question is, when I implement like this, there is nothing in the command bar when I run the app.

    Can you help me to solve it.

    Thanks

    Saturday, April 12, 2014 1:24 PM

Answers

  • CommandBar is not a ListView, whereby you loop over a collection of items and bind it to the datatemplate. . You will need to add each App bar Button directly to the CommandBar.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, April 14, 2014 1:42 PM
    Moderator
  • Hi renren321,

    Try following code:

                AppBarButton bt1 = new AppBarButton();
                bt1.Width = 100;
                bt1.Label = type.Name;
                //bt1.Icon = new SymbolIcon(Symbol.Add);
                BitmapIcon bt1icon = new BitmapIcon();
                bt1icon.UriSource = new Uri("ms-appx://" + type.Icon);
                bt1.Icon = bt1icon;
                bar.PrimaryCommands.Add(bt1);

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, April 15, 2014 1:25 AM
    Moderator

All replies

  • CommandBar is not a ListView, whereby you loop over a collection of items and bind it to the datatemplate. . You will need to add each App bar Button directly to the CommandBar.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, April 14, 2014 1:42 PM
    Moderator
  • Thanks for help, but how to add appbarbutton dynamic in *.cs file, not in xaml.
    Tuesday, April 15, 2014 12:15 AM
  • Hi renren321,

    Try following code:

                AppBarButton bt1 = new AppBarButton();
                bt1.Width = 100;
                bt1.Label = type.Name;
                //bt1.Icon = new SymbolIcon(Symbol.Add);
                BitmapIcon bt1icon = new BitmapIcon();
                bt1icon.UriSource = new Uri("ms-appx://" + type.Icon);
                bt1.Icon = bt1icon;
                bar.PrimaryCommands.Add(bt1);

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, April 15, 2014 1:25 AM
    Moderator
  • Hi James

    Thanks for reply, your code really works, but I met another problem is when I implement like your way, the icon in the button is just a white background (the "/Assets/angle.png" is a png file with some transparent areas), but ifI hardcoding in xaml file like this

    <AppBarButton Width="auto" Label="test" Click="MenuFlyoutItem_Click">
                    <Image Source="/Assets/angle.png" RequestedTheme="Dark"></Image>
                </AppBarButton>

    The icon is colorful.

    Can you tell me what's wrong with it.

    Tuesday, April 15, 2014 12:13 PM