Question

我正在尝试在UWP中创建可关闭的数据透视表头，以便显示带有X的“关闭”框，如下所示：

closeable tab headers

正如您可能已经猜到的那样，我有最简单的案例。但当我尝试将其滚动到我的“真实”应用程序时，标题不会显示。他们在那里，如果我点击Pivot的左上角，PivotItems会改变，但是没有可见的标题（我可以点击更改项目的“触摸活动”区域非常小）。

为了使这接近最简单的情况，这是我在选择“测试”AppBarButton时所做的事情：

// Header disappears from PivotItem!
PivotItem piTemp = ((PivotItem)this.pvtFiles.Items[0]);
CloseableTabHeader cth = new CloseableTabHeader("This is jive", piTemp, this.pvtFiles);
piTemp.Header = cth;

这是来自CloseableTabHeader的XAML：

<UserControl
    x:Class="CloseableTabs.CloseableTabHeader"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CloseableTabs"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <StackPanel Orientation="Horizontal">
        <TextBlock Margin="0,0,0,0" Name="txtHeader" FontSize="18">Test</TextBlock>
        <Button Background="White" Click="Button_Click">
            <Button.Content>
                <PathIcon Data="M13.3000001907349,2.09999990463257L3.5,2.09999990463257 2.51005053520203,2.51005053520203 2.09999990463257,3.5 2.09999990463257,13.3000001907349 2.51005053520203,14.2899494171143 3.5,14.6999998092651 13.3000001907349,14.6999998092651 14.2899494171143,14.2899494171143 14.6999998092651,13.3000001907349 14.6999998092651,3.5 14.2899494171143,2.51005053520203 13.3000001907349,2.09999990463257 M13.3000001907349,13.3000001907349L3.5,13.3000001907349 3.5,3.5 13.3000001907349,3.5 13.3000001907349,13.3000001907349 M11.8999996185303,5.87999963760376L9.3799991607666,8.39999961853027 11.8999996185303,10.9200000762939 10.9200000762939,11.8999996185303 8.39999961853027,9.3799991607666 5.87999963760376,11.8999996185303 4.90000009536743,10.9200000762939 7.42000007629395,8.39999961853027 4.90000009536743,5.87999963760376 5.87999963760376,4.90000009536743 8.39999961853027,7.42000007629395 10.9200000762939,4.90000009536743 11.8999996185303,5.87999963760376z" />
            </Button.Content>
        </Button>
    </StackPanel>
</UserControl>

......这是其他部分类......

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace CloseableTabs
{
    public sealed partial class CloseableTabHeader : UserControl
    {
        public PivotItem itemParent = null;
        public Pivot pivotParent = null;

        public CloseableTabHeader(string headerText,
            PivotItem itemParent, Pivot pivotParent) : base()
        {
            this.InitializeComponent();
            txtHeader.Text = headerText;
            this.itemParent = itemParent;
            this.pivotParent = pivotParent;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (null != this.itemParent && null != this.pivotParent)
            {
                this.pivotParent.Items.Remove(this.itemParent);
            }
        }
    }
}

同样，在我最简单的案例项目中，这很有效。 MainPage的快速详细信息：

XAML

<StackPanel>
    <Pivot Name="pvtMain">
        <PivotItem>
            <TextBlock Text="Content content content" />
        </PivotItem>
        <PivotItem>
            <TextBlock Text="Content2 content2 content2" />
        </PivotItem>
        <PivotItem>
            <TextBlock Text="Content3 content3 content3" />
        </PivotItem>
    </Pivot>
    <Button Content="spam" Click="Button_Click"></Button>
</StackPanel>

构造函数＆amp;按钮事件处理程序，最简单的情况

public MainPage()
{
    this.InitializeComponent();

    this.pvtMain.GetPIByIndex(0).Header = new CloseableTabHeader("Header Text", this.pvtMain.GetPIByIndex(0), this.pvtMain);
    this.pvtMain.GetPIByIndex(1).Header = "header 2";
    this.pvtMain.GetPIByIndex(2).Header = "header 3";
}

// WORKS!
private void Button_Click(object sender, RoutedEventArgs e)
{
    CloseableTabHeader cth = new CloseableTabHeader("Header2 Text", this.pvtMain.GetPIByIndex(1), this.pvtMain);
    this.pvtMain.GetPIByIndex(1).Header = cth;
}

GetPIByIndex是一个方便的扩展......

public static PivotItem GetPIByIndex(this Pivot pivot, int index)
{
    return (PivotItem)pivot.Items[index];
}

除了“真正的”应用程序更复杂之外，两个UI之间确实没有显着差异。但是Pivot是“真正的”应用程序网格中的第一件事......最简单的案例应用程序显然使用了StackPanel，但是当它们只是文本时，我可以毫不费力地显示标题。

也就是说，在“真正的”应用程序中，我正在使用PivotItems的Headers中的字符串加载，然后使用交换到CloseableTabHeader处理来自AppBarButton的事件，就像我在{{{ 1}}事件在最简单的情况下。

这里有明显的陷阱吗？为什么它会在最简单的情况下运行良好，但不能在生产应用程序中运行？

编辑：这是两个CloseableTabHeaders转储的差异，然后我将它们推入相应的PivotItem的标题：

Button_Click

所以我觉得有些东西很有趣。

Answer 1

答案：因为我是个白痴。

我不知道生产应用中PivotItem Header s中的文字有多大，所以很久以前显然是遗忘，我＆＃39; d强制更改了生产应用程序的XAML中的Pivot.HeaderTemplate。

<Pivot.HeaderTemplate>
    <DataTemplate>
        <!-- Here, I was just changing the FontSize to something more
             manageable/less gaudy -->
        <TextBlock Text="{Binding}" Height="Auto" FontSize="18" FontFamily="Consolas"/>
    </DataTemplate>
</Pivot.HeaderTemplate>

很自然地，如果我改变了我投入到绑定中的内容（我想也许是将我的UserControl投入到文本中？），blam。

删除HeaderTemplate 并且你理性上是金色的。在最初的问题中没有道歉，我会在这里留下问题，至少是短暂的，以防这对其他人有帮助。

结论：如果您根据风格编辑了Pivot，请不要期望所有其他编辑都与这些更改无关。

设置为自定义UserControl

XAML

构造函数＆amp;按钮事件处理程序，最简单的情况

1 个答案: