在 Pivot selected Item 更改 UWP 上隐藏子网格答案

【问题标题】：Hide child grid on Pivot selected Item change UWP在 Pivot selected Item 更改 UWP 上隐藏子网格
【发布时间】：2020-04-04 08:26:02
【问题描述】：

我的代码是这样的

<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（Grid inside 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;
    }

对我来说一切都很好，但是当枢轴选定的项目发生变化时，Gris 不会隐藏。我在这里做错了什么？

【问题讨论】：

标签： c# .net xaml uwp

【解决方案1】：

您使用var gridView = FindElementInVisualTree<Grid>(item); 方法得到的Grid 不是数据模板中命名为“grd”的根元素，因此导致了意外行为。如果还想遍历可视化树得到Grid，可以试试下面的方法。

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

但是，一般我们建议您可以使用绑定来实现它。您可以在 UIModel 中定义一个表示可见性的属性以与 Grid 的可见性绑定。选择项目时，将属性更改为 Collapsed。

.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;
}

【讨论】：