绑定列定义宽度

Question

我正在借助 Visual Studio 2015 在 Windows 10 中使用 https://slideview.codeplex.com 创建一个 Windows 8.1 应用程序。

我在设计中添加了 1 行和 2 列的网格。在第一页有大图像，没有文字，在其他页面有图标和文字。因此，我将 if 4* 放入第一页的第一列，将 2* 放入第二页的第一列，一切都很好，但我想在 ContentPresenter 中使其动态化，然后我可以从 C# 分配它。

请有人帮助我。

我尝试了不同的方式，就像我在 SlideApplicationFrame.cs 中放入下面的代码一样

#region FirstColumnWidth (DependencyProperty)

    /// <summary>
    /// header Image First Column Width
    /// </summary>
    public GridLength FirstColumnWidth
    {
        get { return (GridLength)GetValue(FirstColumnWidthProperty); }
        set { SetValue(FirstColumnWidthProperty, value); }
    }
    public static readonly DependencyProperty FirstColumnWidthProperty =
            DependencyProperty.Register("FirstColumnWidth", typeof(GridLength), typeof(SlideApplicationFrame),
                new PropertyMetadata(new GridLength(4, GridUnitType.Star))); 

    #endregion

    #region ContentFirstColumnWidth (Attached DependencyProperty)

    public static readonly DependencyProperty ContentFirstColumnWidth =
            DependencyProperty.RegisterAttached("ContentFirstColumnWidth", typeof(GridLength), typeof(SlideApplicationFrame), new PropertyMetadata(new GridLength(4, GridUnitType.Star)));

    public static void SetContentFirstColumnWidth(DependencyObject o, GridLength value)
    {
        o.SetValue(ContentFirstColumnWidth, value);
    }

    public static GridLength GetContentFirstColumnWidth(DependencyObject o)
    {
        return (GridLength)o.GetValue(ContentFirstColumnWidth);
    }

    #endregion

然后我像这样在我的 ContentPresenter 中使用它

<ContentPresenter  library:SlideApplicationFrame.ContentFirstColumnWidth="{TemplateBinding FirstColumnWidth}" Grid.Column="1"/>

最后在样式设置器中

<ColumnDefinition Width="{Binding library:SlideApplicationFrame.ContentFirstColumnWidth}"/>

整个样式设置器如下

<Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid  x:Name="GridHeader">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{Binding library:SlideApplicationFrame.ContentFirstColumnWidth}"/>
                            <ColumnDefinition Width="5*"/>
                        </Grid.ColumnDefinitions>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>

并从 MainPage.xaml.cs 设置

SlideApplicationFrame RootFrame = Window.Current.Content as SlideApplicationFrame;

RootFrame.FirstColumnWidth = new GridLength(4, GridUnitType.Star);

请帮助我，我将不胜感激

Answer 1

首先你必须记住ColumnDefinition Width 和RowDefinition Height 的值不是Double 类型而是GridLength 类型

然后我能想到两种情况：

1. 绑定到另一个元素的值

2. 从 ViewModel 或后面的代码绑定到值

案例 1：

如果您绑定到某个值 double，您还需要使用转换器将此值转换为 GridLength

案例 2：

如果您要绑定到代码中的某些内容，您可以创建GridLength 类型的属性并直接绑定，或者如果值为double，则再次使用Converter，就像在前面的用例中一样。

关于类型的一些参考

GridLength Structure

GridUnitType Enumeration

• 自动 - 大小由内容对象的大小属性决定。
• 像素 - 值以像素表示。
• 星号 - 该值表示为可用空间的加权比例。

编辑 - 只是一个工作绑定的简单示例

仍然没有找到时间重新创建您的确切情况，所以我只使用了GridView（因为它也有标题） - 内容是紫色的，标题由两个网格列组成 - 绿色和红色，绿色必然主页中定义的依赖属性

XAML

<Page
    ...
    x:Name="root">
    <Page.Resources>
        <Style TargetType="GridView" >
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid x:Name="GridHeader" Height="200">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="5*"/>
                                <ColumnDefinition Width="{Binding ElementName=root, Path=TestGridLength}"/>
                            </Grid.ColumnDefinitions>
                            <Grid Background="Red" Grid.Column="0"></Grid>
                            <Grid Background="Green" Grid.Column="1"></Grid>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <GridView Background="Purple">
    </GridView>
</Page>

背后的代码

public GridLength TestGridLength
{
    get { return (GridLength)GetValue(TestGridLengthProperty); }
    set { SetValue(TestGridLengthProperty, value); }
}

public static readonly DependencyProperty TestGridLengthProperty =
    DependencyProperty.Register(
        "TestGridLength",
        typeof(GridLength),
        typeof(MainPage),
        new PropertyMetadata(null));


public MainPage()
{
    this.InitializeComponent();
    this.TestGridLength = new GridLength(10, GridUnitType.Star);
}