UWP VisualStateManager change number of columns ListView

Question

Ive got simple ListView that represents a grid and i want to switch number of columns depending on Window Width. Here is the code for ListView:

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Resources/Dictionary.xaml"/>
</Page.Resources>
<ListView x:Name="lvCurrencyList" />
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="lvCurrencyList.HeaderTemplate" Value="{StaticResource CurrencyListHeaderTemplate}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="lvCurrencyList.HeaderTemplate" Value="{StaticResource CompactCurrencyListHeaderTemplate}" />
                </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

And here is the code for HeaderTemplate in Dictionary.xaml:

<DataTemplate x:Name="CurrencyListHeaderTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2" />
            <ColumnDefinition Width="auto" MinWidth="100" />
            <ColumnDefinition Width="2" />
            <ColumnDefinition Width="auto" MinWidth="100" />
            <ColumnDefinition Width="2" />
            <ColumnDefinition Width="auto" MinWidth="100" />
        </Grid.ColumnDefinitions>
        <!--Here goes the content-->
    </Grid>
</DataTemplate>

<DataTemplate x:Name="CompactCurrencyListHeaderTemplate">
    <Grid Background="#e6e6e6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2" />
            <ColumnDefinition Width="auto" MinWidth="100" />
        </Grid.ColumnDefinitions>
        <!--Here goes the content-->
    </Grid>
</DataTemplate>

But that code doesent work for me

I tested your code in my side and it works well. So could you share [a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) that can reproduce your issue? — Jay Zuo, Mar 30 '16 at 08:46

score 1 · Answer 1 · answered Mar 30 '16 at 08:57

1

Problem was in the VisualStateManager definition, it was in wrong location. Ive added it into children of a Page.Grid

answered Mar 30 '16 at 08:57

Nickolay Kabash

239
2
12

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

You have defined DataTemplate Resource incorrectly. It should be

<DataTemplate x:Key="CurrencyListHeaderTemplate"> instead x:Name.

Have look at this link for differnce between x:key and x:name

edited May 23 '17 at 12:07

Community

1
1

answered Mar 30 '16 at 08:20

Archana

3,213
1
15
21

This wont help me. If i add a new line to `ListView` with `HeaderTemplate="{StaticResource CompactCurrencyListHeaderTemplate}"` without changing x:Name to x:Key, that will add template as expected. But This wont work in `VisualStateManager` even with `x:Key` – Nickolay Kabash Mar 30 '16 at 08:33
WinRT doesn't support TemplateBinding within a style, isnt it? – Nickolay Kabash Mar 30 '16 at 08:35
Did you write datatemplate definitions inside page.resources? – Archana Mar 30 '16 at 08:45
No, they in a separate file. And now i try to change just `Background` property of a list, this wont work too ^( – Nickolay Kabash Mar 30 '16 at 08:47

UWP VisualStateManager change number of columns ListView

2 Answers2