如何在UWP中使用可视状态修改网格列宽？

Question

为了显示结果，我通过以下示例使用MyToolKit软件包的数据网格： https : //github.com/MyToolkit/MyToolkit/wiki/DataGrid

使用此网格，我可以显示结果。 为了使网格自适应，我想设置两个不同的列宽。 一种是用于窄状态 ，另一种是用于宽状态 。 我在这里添加我的网格和可视状态代码

<controls:DataGrid.Columns>
    <controls:DataGridTextColumn Binding="{Binding billId}" d:DataContext="{d:DesignInstance Type=models:PendingBillDetail}" x:Name="colBillId" >
        <controls:DataGridTextColumn.Header>
            <TextBlock Name="txtBillId" Text="BillId" Foreground="Green" />
        </controls:DataGridTextColumn.Header>
    </controls:DataGridTextColumn>
</controls:DataGrid.Columns>

视觉状态码

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="641" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="colBillId.Width" Value="200" />
                <Setter Target="svPendingBillsList.VerticalScrollBarVisibility" Value="Disabled" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="narrowView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="colBillId.Width" Value="10" />
                <Setter Target="svPendingBillsList.HorizontalScrollBarVisibility" Value="Auto" />
                <Setter Target="svPendingBillsList.VerticalScrollBarVisibility" Value="Disabled" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

值不受状态影响。 请给我您的建议以解决此问题。

Answer 1

我认为Visual State无法处理您的案件。 在您的代码中，您使用了VisualState.Setters colBillId.Width来更改列的宽度。 但是，在加载DataGrid之后，可视树中没有名为colBillId 。 您可以在Visual Studio的实时可视树中找到它：

对于每个DataGridTextColumn ，它都是一个ContentPresenter ，其中包含您在DataGridTextColumn.Header设置的TextBlock 。 如您所见，它们没有命名。 如果我们希望VisualState.Setters的Setter在显示的页面之后工作，则必须在可视树中具有命名的控件。 作为测试，我们可以在Visual State中使用以下代码：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="641" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="colBillId.Width" Value="200" />
                <Setter Target="txtBillId.Foreground" Value="Red" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="narrowView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="colBillId.Width" Value="50" />
                <Setter Target="txtBillId.Foreground" Value="Green" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

如果页面宽度大于“ 641”，您会发现“ BillId”变为红色。 但是，列的宽度不会改变。 因此，在您的情况下，Visual State无法正常工作。

正如Mirko Bellabarba所说，我建议您使用Width中的Star（*）大小作为解决方法。 例如：

<controls:DataGrid.Columns>
    <controls:DataGridTextColumn Width="*" Binding="{Binding billId}" d:DataContext="{d:DesignInstance Type=models:PendingBillDetail}">
        <controls:DataGridTextColumn.Header>
            <TextBlock Name="txtBillId" Foreground="Green" Text="BillId" />
        </controls:DataGridTextColumn.Header>
    </controls:DataGridTextColumn>
    <controls:DataGridTextColumn Width="2*" Binding="{Binding billId}" d:DataContext="{d:DesignInstance Type=models:PendingBillDetail}">
        <controls:DataGridTextColumn.Header>
            <TextBlock Foreground="Green" Text="BillId" />
        </controls:DataGridTextColumn.Header>
    </controls:DataGridTextColumn>
</controls:DataGrid.Columns>

Answer 2

将x:name属性设置为要更改的“网格列”，然后在VisualStateManager中使用该名称。让我知道它是否有效！

Answer 3

我有一个适用于普通网格的解决方案，因此它也应适用于您的DataGrid。

为您的DataGrid命名如下：

<controls:DataGrid x:Name="MyDataGrid">
    <controls:DataGrid.Columns>
        <controls:DataGridTextColumn Binding="{Binding billId}" d:DataContext="{d:DesignInstance Type=models:PendingBillDetail}" x:Name="colBillId" >
            <controls:DataGridTextColumn.Header>
                <TextBlock Name="txtBillId" Text="BillId" Foreground="Green" />
            </controls:DataGridTextColumn.Header>
        </controls:DataGridTextColumn>
    </controls:DataGrid.Columns>
</controls:DataGrid>

然后在可视状态代码中访问 Column，如下所示：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="641" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MyDataGrid.Columns[0].Width" Value="200" />
                <Setter Target="svPendingBillsList.VerticalScrollBarVisibility" Value="Disabled" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="narrowView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MyDataGrid.Columns[0].Width" Value="10" />
                <Setter Target="svPendingBillsList.HorizontalScrollBarVisibility" Value="Auto" />
                <Setter Target="svPendingBillsList.VerticalScrollBarVisibility" Value="Disabled" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

因此，您必须将列作为可索引处理。 因此，应该使用Target="MyDataGrid.Columns[0].Width"代替编写Target="colBillId.Width" Target="MyDataGrid.Columns[0].Width"

希望能有所帮助。