Скрыть дочернюю сетку на выбранной Pivot Изменение элемента UWP

Question

Мой код похож на это

<Grid  Width="Auto" ScrollViewer.VerticalScrollMode="Enabled">
    <Pivot x:Name="mainContentPivot"  SelectionChanged="mainContentPivot_SelectionChanged" ItemsSource="{x:Bind viewModel.headerElement, Mode=OneWay}" >

        <Pivot.HeaderTemplate>
            <DataTemplate x:DataType="models:UIModel">
                <TextBlock Text="{Binding Name, Mode=TwoWay}"/>
            </DataTemplate>
        </Pivot.HeaderTemplate>
        <Pivot.ItemTemplate>
            <DataTemplate>
                <Grid Name="grd" >
                    <local1:myusercontrol></local1:myusercontrol>
                </Grid>
            </DataTemplate>

        </Pivot.ItemTemplate>
    </Pivot>

</Grid>

Когда щелкают по элементу Pivot, я хочу, чтобы Grid (Сетка внутри Pivot) была скрыта.

   public MyViewPage()
    {
        DataContext = viewModel;
        this.InitializeComponent();
    }

    private void mainContentPivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        PivotItem item = (sender as Pivot).ContainerFromItem((sender as Pivot).SelectedItem) as PivotItem;
        var gridView = FindElementInVisualTree<Grid>(item);
        gridView.Visibility=Visibility.Collapsed;

    }

    private T FindElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
    {
        var count = VisualTreeHelper.GetChildrenCount(parentElement);
        if (count == 0) return null;

        for (int i = 0; i < count; i++)
        {
            var child = VisualTreeHelper.GetChild(parentElement, i);
            if (child != null && child is T)
                return (T)child;
            else
            {
                var result = FindElementInVisualTree<T>(child);
                if (result != null)
                    return result;
            }
        }
        return null;
    }

Все выглядит хорошо для меня , Но при изменении выбранного элемента поворота Гри не скрывается. Что я тут не так делаю?

Answer 1

Сетка, которую вы получили с помощью метода var gridView = FindElementInVisualTree<Grid>(item);, не является элементом root, который называет grd шаблона данных, поэтому он вызвал неожиданное поведение. Если вы все еще хотите просмотреть визуальное дерево, чтобы получить сетку, вы можете попробовать использовать следующий метод:

PivotItem item = (sender as Pivot).ContainerFromItem((sender as Pivot).SelectedItem) as PivotItem;
var itemsGrid = item.ContentTemplateRoot as Grid;
itemsGrid.Visibility = Visibility.Collapsed;

Однако, как правило, мы рекомендуем использовать привязку для достижения этой цели. Вы можете определить свойство, которое представляет видимость в вашей UIModel, чтобы связать его с видимостью сетки. При выборе элемента измените свойство на Свернутый.

.xaml:

<Pivot x:Name="mainContentPivot"  SelectionChanged="mainContentPivot_SelectionChanged" ItemsSource="{x:Bind viewModel.headerElement, Mode=OneWay}" >
    ......
    <Pivot.ItemTemplate>
        <DataTemplate>
            <Grid Name="grd" Visibility="{Binding isVisual}">
                <local:myusercontrol></local:myusercontrol>
            </Grid>
        </DataTemplate>
    </Pivot.ItemTemplate>
</Pivot>

.cs:

public class UIModel 
{
    public string Name { get; set; }
    public Visibility isVisual { get; set; }
}

private void mainContentPivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    PivotItem item = (sender as Pivot).ContainerFromItem((sender as Pivot).SelectedItem) as PivotItem;
    (item.DataContext as UIModel).isVisual = Visibility.Collapsed;
}