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

Question

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

我看过一个例子XamlPivot(SHORTCUT)①，使用Pivot制作TabBar，效果很好，我尝试修改一下，让TabBar在底部，上部的内容。

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

现在发现一个大问题，TabBar每个item并没有自动划分宽度，于是我尝试使用数据绑定和值转换器来动态提供宽度，绑定源是MasterGrid的ActuallyWidth，但是ActuallyWidth是不随窗口大小而变化，当Window on WideState时，Mater部分会变为空白。

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

各种窗口大小效果图(去掉"()")：

(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 事件（在您的情况下为枢轴），并将其 ActualWidth / ActualHeight / RenderSize 作为行为上的 DependencyProperties 返回。然后，您的 TabItems 将查看行为上的 ActualWidth。

（默认情况下不会这样做，大概是因为 UWP XAML 没有只读依赖属性支持，而且绑定也很容易在布局四舍五入的情况下导致循环布局循环，如果你不小心的话）