How To Modify Grid Column Width Using Visual State in UWP?

Question

For showing results, I am using Data Grid of MyToolKit Package by following below mentioned example: https://github.com/MyToolkit/MyToolkit/wiki/DataGrid

Using this Grid I am able to show the results. In Order to make grid Responsive I want to set two different Column widths. One is for Narrow State and another one is for Wide State. Here I am adding my grid and visual state code

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

visual state code

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

Values are not effecting according to the state. Please give me your suggestions to solve this issue.

Since your VisualState is auto trigger, you should remove it name (`x:Name="wideView"` and `x:Name="narrowView"`). — NoName, Mar 01 '16 at 08:58
@Sakura Thanks for your suggestion ... I have tried with your suggestions but not working — Sagar, Mar 01 '16 at 10:07

score 1 · Accepted Answer · answered Mar 03 '16 at 05:32

I think Visual State can't work with your case. In your code, you used colBillId.Width in VisualState.Setters to change the column's width. But after your DataGrid loaded, there is no control in the Visual Tree named colBillId. You can find this in Visual Studio's Live Visual Tree:

For each DataGridTextColumn, it's a ContentPresenter that contains the TextBlock you've set in DataGridTextColumn.Header. And as you can see, they are not named. If we want the Setter in VisualState.Setters to work after the page displayed, we must have the named control in visual tree. As a test, we can use following code in 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>

You will find "BillId" become red if the page's width larger than "641". However the column's width doesn't change. So in your case, Visual State can't work.

As Mirko Bellabarba said, I'd suggest you use Star (*) sizing in Width as a workaround. For example:

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

Like written in my answer its possible to acces the columns by index like `MyGrid.Columns[0].Width`. — Alex Witkowski, Mar 11 '16 at 10:19
@AlexWitkowski: Have you tested your code? As in my test, your code didn't work. — Jay Zuo, Mar 11 '16 at 10:55
@JayZuo-MSFT Not now with the DataGrid.. As I wrote in my answer it works for grid so it could/should for the DataGrid - Will give it a try later and have a look on how they implemented the DataGrids Columns. — Alex Witkowski, Mar 11 '16 at 11:40

score 0 · Answer 2 · answered Mar 01 '16 at 11:38

0

Set the x:name property to the Grid Column you want to change, then use that name in your VisualStateManager Let me know if it works!

answered Mar 01 '16 at 11:38

Mirko Bellabarba

562
2
13

1

Have you tried to use width="*" on each column of the DataGrid? Try to set this value directly in the control (not in the VisualStateManager) and set HorizontaAligment="Stretch" for DataGrid, then let me know what happens – Mirko Bellabarba Mar 01 '16 at 13:26
Can you update your answer with all the xaml code? Another thing you can try is to manually set the width to some values, e.g: 200px and 500px and see if the UI change accordingly, maybe you have some other problems in the xaml that is not related to DataGrid/VisualStateManager – Mirko Bellabarba Mar 01 '16 at 14:10
@ Mirko Bellabarba Yes When I am giving values manually its applying ... but here my problem is I want to change width of the column.So that I am using Visual State ... But Its not working ... I am using above mentioned code for modifying width... Or else if possible please suggest me with any relevant example – Sagar Mar 02 '16 at 05:31

score 0 · Answer 3 · answered Mar 11 '16 at 10:17

I have a Solution that works for common Grid so it schould also work for your DataGrid.

Give your DataGrid a name like:

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

And then acces the Column like this in your visual state code:

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

So you have to handle the columns as an indexable. So instead of writing Target="colBillId.Width" you should use Target="MyDataGrid.Columns[0].Width"

Hope that helps.

How To Modify Grid Column Width Using Visual State in UWP?

3 Answers3