Question

Tabbar是iOS和Android上非常常见的导航控件。但UWP似乎没有。

我见过一个例子 XamlPivot（SHORTCUT）①，使用Pivot制作TabBar，效果非常好，我试图修改它，使TabBar在底部，内容在上层。

我的项目是MasterDetail，Master部分是TabBar（即TabsStyle Pivot），细节部分只是空白。

现在我发现了一个很大的问题，TabBar每个项目都没有自动划分宽度，那么我尝试使用数据绑定和值转换器来动态提供宽度，绑定源是MasterGrid的ActuallyWidth，但是ActuallyWidth确实不随窗口大小而变化，当WideState上的Window时，Mater部分将变为空白。

那么，如何动态更改TabBarItem的宽度？

各种窗口大小效果图表（删除＆＃34;（）＆＃34;）：

（HTTPS：）// i.stack.imgur.com/3GE5t.png

（HTTPS：）// i.stack.imgur.com/FyQuX.png

（HTTPS：）// i.stack.imgur.com/pChwz.png

（HTTPS：）// i.stack.imgur.com/cib1l.png

XAML：

 <Pivot x:Name="pivot"
               Style="{StaticResource TabsStylePivotStyle}">
            <PivotItem>
                <PivotItem.Header>
                    <local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
                                     Glyph="&#xE719;"
                                     Label="item 1" />
                </PivotItem.Header>
                <TextBlock Text="Content content content" />
            </PivotItem>

            <PivotItem>
                <PivotItem.Header>
                    <local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
                                     Glyph="&#xE721;"
                                     Label="item 2" />
                </PivotItem.Header>
                <TextBlock Text="Content content content" />
            </PivotItem>

            <PivotItem>
                <PivotItem.Header>
                    <local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
                                     Glyph="&#xE723;"
                                     Label="item 3" />
                </PivotItem.Header>
                <TextBlock Text="Content content content" />
            </PivotItem>
        </Pivot>

转换器：

public object Convert(object value, Type targetType, object parameter, string language)
{
    return (double)value / 3;
}

Answer 1

对于记录，ActualWidth不是UWP XAML模型中的DependencyProperty - 因此无法正确参与绑定（它不会通知更改）。

因此，如果您希望像您一样进行绑定，那么您需要以可绑定的方式公开ActualWidth。这样做的一个更简单的方法是为其明确创建一个行为，它附加到目标元素的SizeChange事件（在您的情况下是枢轴），并将其作为DependencyProperties返回到ActualWidth / ActualHeight / RenderSize关于行为。然后，您的TabItem将查找行为的ActualWidth。

（默认情况下没有完成，大概是因为UWP XAML没有只读依赖属性支持，而且如果你＆＃布局舍入正在进行中，它也很容易导致循环布局周期39;不要小心）

如何在UWP中动态更改控件的宽度？

1 个答案: