DataBinding inside data template in UWP

Question

I have a usercontrol as follows which has DataTemplate. I want to bind the data inside the DataTemplate to a property inside the DataContext. In Uwp frustratingly they don't have ancestor type, how can I make my thing to work. I have refered this post UWP Databinding: How to set button command to parent DataContext inside DataTemplate but it doesn't work. Please help.

UserControl:

<local:CommonExpanderUserControl>
<local:CommonExpanderUserControl.ExpanderContent>
 <DataTemplate x:DataType="Data:VmInstrumentSettingsLocal">
<StackPanel>
<TextBlock Text="{Binding LisLocalSettings.SomeText}"/>
<controls:ButtonBadged x:Name="ButtonApplyLisLocalChanges" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
                                               x:Uid="/Application.GlobalizationLibrary/Resources/InstrumentSettingsViewButtonApply"
                                               HorizontalAlignment="Center"
                                               Margin="8"
                                               Command="{Binding LisLocalSettings.SaveLisSettings}"/>
</StackPanel>
</DataTemplate>
</local:CommonExpanderUserControl.ExpanderContent>
</CommonExpanderUserControl>

In my UserControl xaml.cs as follows. I want to bind the button command to Command property inside the LisLocalSettings, but it won't work.

public InstrumentSetupLocalSettingsView()
        {
            this.InitializeComponent();
            DataContext = this;
        }
 public static readonly DependencyProperty LisLocalSettingsProperty = DependencyProperty.Register(
            nameof(LisLocalSettings),
            typeof(VmInstrumentSettingsLisLocal), 
            typeof(InstrumentSetupLocalSettingsView), 
            new PropertyMetadata(default(VmInstrumentSettingsLisLocal)));

        public VmInstrumentSettingsLisLocal LisLocalSettings
        {
            get => (VmInstrumentSettingsLisLocal) GetValue(LisLocalSettingsProperty);
            set => SetValue(LisLocalSettingsProperty, value);
        }

score 0 · Accepted Answer · answered Mar 04 '20 at 05:27

DataBinding inside data template in UWP

You could place Command in data source, but if the data source is collection, we need implement multiple command instance. In general, we place the command in current DataContext that could be reused. For the detail steps please refer the following.

<Page.Resources>
    <DataTemplate x:Key="HeaderTemplate">
        <StackPanel
            x:Name="ExpanderHeaderGrid"
            Margin="0"
            Padding="0"
            HorizontalAlignment="Stretch"
            Background="Red"
            Orientation="Vertical"
            >
            <TextBlock x:Name="TextBlockLisSharedSettingsTitle" Text="{Binding}" />
            <Button Command="{Binding ElementName=RootGrid, Path=DataContext.BtnCommand}" Content="{Binding}" />
        </StackPanel>
    </DataTemplate>
</Page.Resources>
<Grid x:Name="RootGrid">
    <uwpControls:Expander Header="hello" HeaderTemplate="{StaticResource HeaderTemplate}" />
</Grid>

Code Behind

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }
    public ICommand BtnCommand
    {
        get
        {
            return new CommadEventHandler<object>((s) => BtnClick(s));
        }
    }

    private void BtnClick(object s)
    {

    }
}
public class CommadEventHandler<T> : ICommand
{
    public event EventHandler CanExecuteChanged;

    public Action<T> action;
    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object parameter)
    {
        this.action((T)parameter);
    }
    public CommadEventHandler(Action<T> action)
    {
        this.action = action;

    }
}

DataBinding inside data template in UWP

1 Answers1