0

I have navigation view, where i define CommandBar. In CommandBar, implemented two AppBarButton's:

        <NavigationView x:Name="NavView">
            <NavigationView.HeaderTemplate>
                <DataTemplate>
                    <Grid Margin="24,10,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <TextBlock
                            Margin="0,0,0,10"
                            VerticalAlignment="Bottom"
                            FontSize="28"
                            Style="{StaticResource TitleTextBlockStyle}"
                            Text="{Binding}" />
                        <CommandBar
                            Grid.Column="1"
                            Margin="0,0,10,0"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Bottom"
                            DefaultLabelPosition="Right">
                            <AppBarButton
                                Icon="Edit"
                                Label="Feedback" />
                            <AppBarButton
                                Icon="OtherUser"
                                Label="ChangeUser" />
                        </CommandBar>
                    </Grid>
                </DataTemplate>
            </NavigationView.HeaderTemplate>

I would like bind that's AppBarButtons with methods in ViewModel, but i can't do that.I try make like that:

<AppBarButton
    Icon="Edit"
    Label="Feedback"
    Click="{x:Bind ViewModel.Foo}"/>

But it's not work. On compilation appear error: Object reference not set to an instance of an object. I'm tried add into <DataTemplate x:DataType>, and binding to method like that:

<AppBarButton
        Icon="Edit"
        Label="Feedback"
        Click="{x:Bind Foo}"/>

It's compiled, but on runtime is throwing exception and disappeared navigation header. Tell me please, how i can binding this AppBarButtons to my methods?

1 Answer 1

0

For you want to use x:bind to bind the button in HeaderTemplate, you should find the datacontext and bind the ViewModel.

Try to new a ViewModel and set it to datacontext.

public class ViewModel
{
    public void Foo()
    {
    }
}


    public MainPage()
    {
        this.InitializeComponent();

        DataContext = new ViewModel();
    }

You need to add dataType inhead.

DataTemplate x:DataType="local:ViewModel"

All the code in xaml below.

    <NavigationView x:Name="NavView">
        <NavigationView.HeaderTemplate>
            <DataTemplate x:DataType="local:ViewModel">
                <Grid Margin="24,10,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock
                        Margin="0,0,0,10"
                        VerticalAlignment="Bottom"
                        FontSize="28"
                        Style="{StaticResource TitleTextBlockStyle}"
                        Text="{Binding}" />
                    <CommandBar
                        Grid.Column="1"
                        Margin="0,0,10,0"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Bottom"
                        DefaultLabelPosition="Right">
                        <AppBarButton
                            Icon="Edit"
                            Label="Feedback" 
                            Click="{x:Bind Foo}"/>
                        <AppBarButton
                            Icon="OtherUser"
                            Label="ChangeUser" 
                            Click="{x:Bind Foo}"/>
                    </CommandBar>
                </Grid>
            </DataTemplate>
        </NavigationView.HeaderTemplate>
        </NavigationView>

Please press F5 to run.

enter image description here

When you click the Feedback that you can see xaml call the Foo.

enter image description here

2
  • Thank you very much, it's working! Tell me please, must we define DataContext everywhere we use ViewModel, or, it actually like for current example?
    – Artem
    Commented May 5, 2018 at 11:56
  • @Artem For you want to use x:Bind the good pattern is use DataContext. But you can use binding to bind the element property.
    – lindexi
    Commented May 5, 2018 at 12:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.