How can I bind nested class to datatemplate?

Question

I have custom element and want to change it content by selector.

It means:

 <xamlExtensions:BitmapButton 
                                Grid.Column="5"
                                Click="OnBuyButtonClicked" 
                                Command="{Binding BuyCommand}" CommandParameter="{Binding}"
                                Style="{StaticResource BitmapButtonStyle}"
                                DisabledStateBitmap="ms-appx:///Assets/UI/Pages/MainPage/BuyCoinsPopup/disabledButton.png">

                            <xamlExtensions:BitmapButton.Content>
                                <ContentControl ContentTemplateSelector="{StaticResource ButtonSelector}"  Content="{Binding ContentButton}">
       
                                </ContentControl>
                                
                            </xamlExtensions:BitmapButton.Content>
                        </xamlExtensions:BitmapButton>


<DataTemplate x:Key="EnabledButtonTemplate">
            <TextBlock FontWeight="Bold" FontSize="24" Text="{Binding Path =BuyText}"/>
        </DataTemplate>

        <DataTemplate x:Key="DisabledButtonTemplate" >
            <TextBlock FontWeight="Bold" FontSize="18" Text="{Binding Path =NotAvaliable}"/>
        </DataTemplate>

        <DataTemplate x:Key="TimedButtontemplate" >
            <StackPanel >
                <TextBlock FontWeight="Bold" FontSize="14" Text="{Binding Path= AvaliableInTitle}" HorizontalAlignment="Center" Foreground="Black"/>
                <TextBlock FontWeight="Bold" FontSize="14" Text="{Binding Path = Counter}" HorizontalAlignment="Center" Foreground="Black"/>
            </StackPanel>
        </DataTemplate>
        <helpers1:ButtonDataTemplateSelector x:Key="ButtonSelector"
                          EnabledButtonTemplate="{StaticResource EnabledButtonTemplate}"
                          DisabledButtonTemplate="{StaticResource DisabledButtonTemplate}"
                          TimedButtontemplate="{StaticResource TimedButtontemplate}"/>

view model:

 public class ContentButton : ObservableObject
    {
        private string _buyText = string.Empty;
        private string _counter = "--:--";
        private ButtonState _buttonState;
        private string _avaliableInTitle = LocalizationManager.GetLocalizedString("AvaliableInTitle");
        private string _notAvaliable = "Not avaliable";

        public string BuyText
        {
            get { return _buyText; }
            set
            {
                _buyText = value;
                RaisePropertyChanged("BuyText");
            }
        }

        public string NotAvaliable
        {
            get { return _notAvaliable; }
            set
            {
                _buyText = value;
                RaisePropertyChanged("NotAvaliable");
            }
        }

        public string Counter
        {
            get { return _counter; }
            set
            {
                _counter = value;
                RaisePropertyChanged("Counter");
            }
        }

        public ButtonState ButtonState
        {
            get
            {
                return _buttonState;
            }
            set
            {
                _buttonState = value;
                RaisePropertyChanged("ButtonState");
            }
        }

        public string AvaliableInTitle
        {
            get { return _avaliableInTitle; }
            set
            {
                _avaliableInTitle = value;
                RaisePropertyChanged("AvaliableInTitle");
            }
        }
    }

public class StorePopupTileItem : TileItem
    {
 private ContentButton _contentButton;
public ContentButton ContentButton
        {
            get
            {
                return _contentButton;
            }
            set
            {
                _contentButton = value;
                RaisePropertyChanged("ContentButton");
            }
        }
    }

I am binding StorePopupTileItem; and when I change one of properties (AvaliableInTitle, BuyText or else) it doesn't change on the view.

How can I fix it?

Thanks

Answer 1

Hi Burusera,

In your post, I don’t understand if you want to choose date template of custom control according the data source’s property or you want to choose data template at runtime. I need more information to make it clear. Now I assume you are in the first scenario.

There is no information about the ButtonDataTemplateSelector class. This class helps us to select data template. I create a code snippet to show how it works. Maybe you can find some inspiration.

public class ButtonDataTemplateSelector : DataTemplateSelector
    {
        public DataTemplate DefaultTemplate { get; set; }
        public DataTemplate EnabledButtonTemplate { get; set; }
        public DataTemplate DisabledButtonTemplate { get; set; }
        public DataTemplate TimedButtontemplate { get; set; }
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            //there is a property indicate what datatempla will be applied
            DataDOL obj = item as DataDOL;        
            // Default Template
            if (obj.Type=="Default")
            {
                return this.DefaultTemplate;
            }
            if (obj.Type == "Enabled")
            {
                return this.EnabledButtonTemplate;
            }
            if (obj.Type=="Disabled")
            {
                return this.DisabledButtonTemplate;
            }
            if (obj.Type=="Timed")
           {
                return this.TimedButtontemplate;
            }
            // other type of data template
            string template = @"
                <DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>
                    <Grid Background='Blue' Width='160' Height='160' Margin='4'>
                        <StackPanel>        
                            <TextBlock Text='{Binding Path=OtherProperty}' Margin='2' FontWeight='Bold' FontSize='24' />
                      </StackPanel>
                    </Grid>
                </DataTemplate>";
            return XamlReader.Load(template) as DataTemplate;
        }
}

If I misunderstand you, please feel free to let me know.

If you still have questions, please send me a repro project and use your OneDrive to share a link here.

Regards,

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 2

yes, I have select template and it looks like

protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            if (item != null)
            {
                var itemCur = (ContentButton)item;
                switch (itemCur.ButtonState)
                {
                    case ButtonState.Disabled:
                        return DisabledButtonTemplate;
                    case ButtonState.TimeDisabled:
                        return TimedButtontemplate;
                    case ButtonState.Enabled:
                        return EnabledButtonTemplate;
                }
            }
            return EnabledButtonTemplate;

but I don't know what to do if I change only one field (f.e. ButtonState) from the code side?

In this case new information doesn't bind. And right now in every point where I want to update button I need to do this:

StorePopupTileItem tempItem = TileItem;
                TileItem.ContentButton = new ContentButton
                {
                    BuyText = tempItem.ContentButton.BuyText,
                    ButtonState = ButtonState.Enabled,
                    Counter = tempItem.ContentButton.Counter
}

I don't think that it's a good solution

Answer 3

Hello,

If you need more assistant, I would recommend you post a whole repro project. Use your OneDrive and share a link here. I would like to know how you generate the binding source list. Do you want to change the datetemplate after binding the data source list at runtime? I need more information for this thread.

I pick up an article talking about Data Template selector and have a sample code. Hope this is useful.

Regards,

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.