locked
Windows 8 RT: GridView Items Selection and Alignment RRS feed

  • Question

  • The code below

    The code below displays my List of Foo objects, where Foo is a bool, string, and string. Great! Still, I'm struggling with a couple of details:

    • The items in the list are centered, but I need them aligned to the Left. Setting HorizontalAlignment on any of the tags below doesn't fix it. Any suggestions?
    • The strings in each item are clickable, and this highlights the text and places a check at the upper-right corner of the text. I've got to turn off this feature. If the user accidently clicks the text and see a check, they'll be confused.

    Thanks!

    <GridView ItemsSource="{Binding FooListVM}" HorizontalAlignment="Left" IsItemClickEnabled="False">
        <GridView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="1">
                    <CheckBox IsChecked="{Binding IsChecked}" IsEnabled="True" />
                    <TextBlock Text="{Binding Identifier}" />
                    <TextBlock Text="{Binding Description}" />
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

    Randy

    Tuesday, October 15, 2013 4:21 PM

Answers

  • Hi,Randy

    If you want to make the GridView item in the left-alignment, you can edit the

    GridView.ItemContainerStyle.

    Try the code below:

     <GridView ItemsSource="{Binding}" IsItemClickEnabled="False" Name="gridview" SelectionMode="None" HorizontalContentAlignment="Left">
                <GridView.ItemContainerStyle >
                    <Style TargetType="GridViewItem">
                        <Setter Property="HorizontalAlignment" Value="Left"/>
                    </Style>
                </GridView.ItemContainerStyle>
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal"   >
                            <CheckBox IsChecked="{Binding IsChecked}" IsEnabled="True" HorizontalContentAlignment="Left" />
                            <TextBlock Text="{Binding Identifier}" />
                            <TextBlock Text="{Binding Description}" />
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>

    The 'clickability' problem can be solved you can refer to the Diederik answer!

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    • Edited by Anne Jing Wednesday, October 16, 2013 7:55 AM edit
    • Proposed as answer by prasanas Wednesday, October 16, 2013 10:38 AM
    • Unproposed as answer by prasanas Wednesday, October 16, 2013 10:38 AM
    • Proposed as answer by prasanas Wednesday, October 16, 2013 10:39 AM
    • Marked as answer by Randy42Developer42 Wednesday, October 16, 2013 3:12 PM
    Wednesday, October 16, 2013 7:55 AM

All replies

  • Hi Randy,

    I cannot replicate the center-alignment, but the 'clickability' problem can be solved by applying the correct SelectionMode to the GridView, like this:

    <GridView ItemsSource="{Binding FooListVM}"
                HorizontalAlignment="Left"
                IsItemClickEnabled="False"
                SelectionMode="None">

    Tuesday, October 15, 2013 5:51 PM
  • Hello Randy42Developer42,

    I understand your question little bit, can you explain your design (show image of your style)?

    Wednesday, October 16, 2013 6:55 AM
  • before designing try like this 

    always static first

    <!--<StackPanel Orientation="Horizontal" Margin="1" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center">
                <CheckBox IsChecked="{Binding IsChecked}" IsEnabled="True" />
                <Grid>
                <TextBlock Text="uytutyu" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <TextBlock Text="qwetyu" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
                </Grid>
            </StackPanel>-->

    then code

     <GridView ItemsSource="{Binding FooListVM}" HorizontalAlignment="Left" IsItemClickEnabled="False" SelectionMode="None" x:Name="gridview">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="1" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <CheckBox IsChecked="{Binding IsChecked}" IsEnabled="True" Content="checked" />
                            <Grid>
                                <TextBlock Text="{Binding Identifier}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                <TextBlock Text="{Binding Description}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
                            </Grid>
                        </StackPanel>                    
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>

    List<FooListM> FooListVM = new List<FooListM>();
    for (int i = 0; i < 5; i++)
                {
                    FooListVM.Add(new FooListM() { IsChecked = false, Identifier = "sdfg" + i, Description= "qwerty" + i });
                } 
                gridview.ItemsSource = FooListVM;
    public class FooListM
        {
            public bool IsChecked { get; set; }
    
            public string Description { get; set; }
    
            public string Identifier { get; set; }
        }
    
    if this was helpful vote and mark as answer

    Wednesday, October 16, 2013 7:18 AM
  • Hi,Randy

    If you want to make the GridView item in the left-alignment, you can edit the

    GridView.ItemContainerStyle.

    Try the code below:

     <GridView ItemsSource="{Binding}" IsItemClickEnabled="False" Name="gridview" SelectionMode="None" HorizontalContentAlignment="Left">
                <GridView.ItemContainerStyle >
                    <Style TargetType="GridViewItem">
                        <Setter Property="HorizontalAlignment" Value="Left"/>
                    </Style>
                </GridView.ItemContainerStyle>
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal"   >
                            <CheckBox IsChecked="{Binding IsChecked}" IsEnabled="True" HorizontalContentAlignment="Left" />
                            <TextBlock Text="{Binding Identifier}" />
                            <TextBlock Text="{Binding Description}" />
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>

    The 'clickability' problem can be solved you can refer to the Diederik answer!

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    • Edited by Anne Jing Wednesday, October 16, 2013 7:55 AM edit
    • Proposed as answer by prasanas Wednesday, October 16, 2013 10:38 AM
    • Unproposed as answer by prasanas Wednesday, October 16, 2013 10:38 AM
    • Proposed as answer by prasanas Wednesday, October 16, 2013 10:39 AM
    • Marked as answer by Randy42Developer42 Wednesday, October 16, 2013 3:12 PM
    Wednesday, October 16, 2013 7:55 AM
  • That was exactly what I needed for the selection problem. Many thanks!

    Randy

    Wednesday, October 16, 2013 3:11 PM
  • Using ItemContainerStyle solves the problem. Diederik Solved the selection mode problem. Many thanks!!!!!!!

    Randy

    Wednesday, October 16, 2013 3:13 PM