Programmatically change databound property in GridView ItemTemplate

1
votes

I have a C# and XAML project that involves a GridView bound to an ObservableCollection of Slides called myList. Slide has two properties of interest - a name and description. By default, the items in the GridView display the Name property, but I want a button to toggle between showing Name and showing Description.

Excerpt from Slide:

public class Slide : INotifyPropertyChanged {
    private string _Name;
    private string _Description;
    public string Name { 
        get {
           return this._Name;
        } set {
           //snipped for convenience: check that the property has changed and set it
        }
    }
    public string Description { 
        get {
           return this._Description;
        } set {
           //snipped for convenience: check that the property has changed and set it
        }
    }
/*etc...*/
}

The XAML looks something like this right now:

<GridView /*...*/ ItemsSource="{Binding myList}">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid /*...*/ >
              <TextBlock /*...*/ Text="{Binding Name}" />
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

When the user clicks a button I want to programatically change the property bound to the Text field of the TextBlock in the DataTemplate, changing every item in the GridView. I know how to do it for an individual XAML Element, but I'm not sure how to do this for the dynamic content in a GridView. Any tips?

I snipped out a bunch of code that seemed superfluous, but let me know if there's any additional info you need.

Thanks!

2
c#winrt-xaml
I found this question and answer which suggests I create a second GridView bound to the other property and toggle between the two. I suppose that will work but it seems like there must be a way to do this without writing twice the XAML. – Ryan Sloan

2 Answers

0
votes

Maybe I am not understanding fully but it seems like you should just make a separate TextBlock control and programatically hide/show each databound TextBlock when the button is clicked.

EDIT: Found this answer to help with the visibility aspect (I dont have much XAML experience). If this can only be executed on a databinding event then maybe consider creating a global boolean ShowName and when the button is pressed toggle that boolean value then launch the databind event of the GridView. Then that event will check the booleans value and show/hide the correct TextBlock.

0
votes

I did have to write a little bit of duplicate XAML, but I didn't have to duplicate the entire GridView or do any show/hide trickery. I added two DataTemplates to Page.Resources that look like this:

<DataTemplate x:Key="SideATemplate" x:Name="SideATemplate">
    <Grid Background="White" Width="400" Height="200">
        <TextBlock /*snip*/ Text="{Binding   Name}" />
    </Grid>
    </DataTemplate>
<DataTemplate x:Key="SideBTemplate" x:Name="SideBTemplate">
    <Grid Background="White" Width="400" Height="200">
        <TextBlock /*snip*/ Text="{Binding   Description}" />
    </Grid>
</DataTemplate>

In the event handler for the button that swaps them I can then change the template:

    private void Flipbtn_Tapped(object sender, TappedRoutedEventArgs e)
    {
        if (/*Snip conditional stuff*/) {
        SlidesGridView.ItemTemplate = SideBTemplate;
        } else {
        SlidesGridView.ItemTemplate = SideATemplate;
        }
    }