1

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

使用这个网格我可以显示结果。为了使网格响应，我想设置两个不同的列宽。一个用于Narrow State，另一个用于Wide State。在这里，我添加了我的网格和视觉状态代码

<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>

值不受状态影响。请给我你的建议来解决这个问题。

4

3 回答 3

1

我认为 Visual State 不适用于您的案例。在您的代码中，您用于 colBillId.Width更改VisualState.Setters列的宽度。但是在您DataGrid加载之后，名为colBillId. 您可以在 Visual Studio 的Live Visual Tree中找到它：

在此处输入图像描述

对于每个DataGridTextColumn，它都是一个ContentPresenter包含TextBlock您在 中设置的DataGridTextColumn.Header。正如你所看到的，它们没有被命名。如果我们想Setter在VisualState.Setters页面显示后工作，我们必须在可视化树中有命名控件。作为测试，我们可以在 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”变为红色。但是列的宽度不会改变。所以在你的情况下，视觉状态不能工作。

正如 Mirko Bellabarba 所说，我建议您使用星号 (*) 大小Width作为解决方法。例如：

<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>
于 2016-03-03T05:32:56.523 回答
0

我有一个适用于通用网格的解决方案，因此它也适用于您的 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>

然后在您的视觉状态代码中访问这样的列：

<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="colBillId.Width"因此，您应该使用而不是写作Target="MyDataGrid.Columns[0].Width"

希望有帮助。

于 2016-03-11T10:17:38.037 回答
0

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

于 2016-03-01T11:38:04.510 回答