locked
ListViewItem Style RRS feed

  • Question

  • Hi,

    I have reinstalled my dev computer with W8.1 and VS 2013. Before this I had W8.0 and VS 2012, and the following was working.

        <UserControl.Resources>
            <Style x:Key="lstItmStyle" TargetType="ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Border BorderThickness="1" BorderBrush="White" CornerRadius="4" Width="500" Margin="5" Background="{Binding color}" HorizontalAlignment="{Binding align}">
                                <Grid >
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <StackPanel Grid.Row="0" Margin="5" Orientation="Horizontal">
                                        <TextBlock Text="{Binding alias}" FontWeight="Bold"/>
                                        <TextBlock Text="{Binding added}" FontWeight="Bold" Margin="20,0,0,0"/>
                                    </StackPanel>
                                    <TextBlock Grid.Row="1" Margin="5" Text="{Binding text}" TextWrapping="Wrap" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
        <Grid Background="Gray">
            <ListView x:Name="lstChat" Margin="20,100,0,0" Grid.Row="0" Background="Transparent" 
                      ItemsSource="{Binding ocChat}" SelectionMode="None" ItemContainerStyle="{StaticResource lstItmStyle}"/>
        </Grid>
        public sealed partial class UCChat : UserControl
        {
            public UCChat(int gameid)
            {
                this.InitializeComponent();
                GetChat(gameid);
            }
            private async void GetChat(int gameid)
            {
                m.MixTestClient mtc = new m.MixTestClient();
                ObservableCollection<m.clsChat> ocChat = await mtc.GetGameChatAsync(AppConstants.G_email, gameid);
                lstChat.ItemsSource = ocChat;
            }
        }

    I have checked so the data in ocChat have the fields text, color, align, added, alias.

    I can see three boxes (as the result is three records), and that the Border has the CornerRadius set, but nothing inside the boxes. So it's probably something wrong with the bindings, but I can't figure out what, and it worked in W8.0 with VS2012.

    Pleeeease help!
    Regards /Magnus


    • Edited by Flowhill1 Saturday, November 9, 2013 3:09 PM
    Saturday, November 9, 2013 2:58 PM

Answers

  • Hi,

    I didn't solve this, but my workaround was to add the template directly inside the listview as

    <ListView x:Name="lstChatInPage" ItemsSource="{Binding}">
       <ListView.ItemTemplate>
              <DataTemplate>
                       ...content...
              </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    /Magnus

    Monday, November 11, 2013 10:24 PM

All replies

  • Remove the ItemsSource="{Binding ocChat}" Line from the Xaml. At best it isn't used. Beyond that, the code you provide here seems to work fine, but it's not clear what the problem is or what the code you didn't include (such as clsChat) does.

    Can you provide a minimal project that demonstrates the problem and a clear description of what isn't working?

    --Rob

    Saturday, November 9, 2013 10:53 PM
    Moderator
  • Hi Rob, and thanks for your answer.

    I removed the itemsource from the xaml with no luck.
    Below you can see a simple "standalone" project. To make it realistic, it's inside a usercontrol.

    XAML:

        <UserControl.Resources>
            <Style x:Key="lstItmStyle" TargetType="ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Border BorderThickness="1" BorderBrush="White" CornerRadius="6" Width="300" >
                                <Grid >
                                    <StackPanel>
                                        <TextBlock Text="start static" />
                                        <TextBlock Text="{Binding alias}" />
                                        <TextBlock Text="{Binding text}" />
                                        <TextBlock Text="end static" />
                                    </StackPanel>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
        <Grid Background="Gray">
            <ListView x:Name="lstChat" Grid.Row="0" Background="Green" 
                     SelectionMode="None" ItemContainerStyle="{StaticResource lstItmStyle}"/>
        </Grid>


    C# codebehind

        public class clsChat
        {
            public string alias { get; set; }
            public string text { get; set; }
        }
        public sealed partial class ucChat : UserControl
        {
            public ucChat()
            {
                this.InitializeComponent();
                GetChat();
            }
            private void GetChat()
            {
                clsChat c1 = new clsChat(); c1.alias = "myalias1"; c1.text = "mytext1";
                clsChat c2 = new clsChat(); c2.alias = "myalias2"; c2.text = "mytext2";
                clsChat c3 = new clsChat(); c3.alias = "myalias3"; c3.text = "mytext3";
                System.Collections.ObjectModel.ObservableCollection<clsChat> oc = new System.Collections.ObjectModel.ObservableCollection<clsChat>();
                oc.Add(c1); oc.Add(c2); oc.Add(c3);
                lstChat.ItemsSource = oc;
            }
        }

    So just add a usercontrol with name ucChat, and paste code above.
    Add <local:ucChat/> in the mainpage.xaml

    Now you can see three boxes. In these, two static texts, and two empty rows between them, which shouldn't be empty.

    Thanks /Magnus

    Sunday, November 10, 2013 12:55 AM
  • Hi,

    I didn't solve this, but my workaround was to add the template directly inside the listview as

    <ListView x:Name="lstChatInPage" ItemsSource="{Binding}">
       <ListView.ItemTemplate>
              <DataTemplate>
                       ...content...
              </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    /Magnus

    Monday, November 11, 2013 10:24 PM