CODEWITHSUNDEEP
wpfxamlwindows-8
Kevin Orriss
Kevin Orriss

Reputation: 1022

Two dimensional GridView

so I am simply trying create a GridView where I hover over each item and they are highlighted. I also want to be able to select a single item.

I have this working where each item is a rectangle, but this only seems to be for a single row/direction.

I would like a GRID (seems obvious that a grid has rows AND columns) but I just cant figure out how to add further rows.

I have looked at code sources and they all dive off into overly complicated code-behing files defining the source or whatever.

Does the GridView element not simply have a Columns="7" type property?

Here is the XAML I have:

Style resources

<ItemsPanelTemplate x:Key="colorSelectionRowTemplate">
    <StackPanel Orientation="Horizontal">
        <StackPanel.ChildrenTransitions>
            <TransitionCollection/>
        </StackPanel.ChildrenTransitions>
    </StackPanel>
</ItemsPanelTemplate>
<Style x:Key="colorSelectionRow" TargetType="GridView">
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
    <Setter Property="GridView.ItemsPanel" Value="{StaticResource colorSelectionRowTemplate}"/>
</Style>
<Style x:Key="colorSelection" TargetType="Rectangle">
    <Setter Property="Width" Value="30"/>
    <Setter Property="Height" Value="30"/>
</Style>

Rows

<GridView Style="{StaticResource colorSelectionRow}">
    <Rectangle Style="{StaticResource colorSelection}" Fill="AliceBlue" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="AntiqueWhite" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="Aqua" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="Aquamarine" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="Azure" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="Beige" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="Bisque" Tapped="OnColorSelectionTapped"/>
</GridView>
    <GridView Style="{StaticResource colorSelectionRow}">
    <Rectangle Style="{StaticResource colorSelection}" Fill="AliceBlue" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="AntiqueWhite" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="Aqua" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="Aquamarine" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="Azure" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="Beige" Tapped="OnColorSelectionTapped"/>
    <Rectangle Style="{StaticResource colorSelection}" Fill="Bisque" Tapped="OnColorSelectionTapped"/>
</GridView>

As an example of two rows...

But obviously this way, there are multiple selections if you choose one from each row (individual GridView).

Anyone know of a simple fix for this so I can have 4 rows each with 7 columns in the same GridView?

Thanks for reading all this, appreciate it.

Kevin

Upvotes: 0

Views: 154

Answers (1)

Kevin Orriss
Kevin Orriss

Reputation: 1022

The answer to my question is WrapGrid in the items panel template if anyone else is getting stuck with this seemingly over complex element.

<ItemsPanelTemplate x:Key="colorSelectionRowTemplate">
    <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="7">
    </WrapGrid>
</ItemsPanelTemplate>

Upvotes: 1

Related Questions