CODEWITHSUNDEEP
xamluwpuwp-xaml
MSchaefer
MSchaefer

Reputation: 61

Styling ListView in UWP

I found this question + answer to my problem here on stackoverflow, but for me its not totally clear where to change the 

ListViewItemPresenter

I tried many things, but it seems like I cant find it on my own :(

Here is my XAML code for this frame:

<Page.Resources>
    <DataTemplate x:Key="ItemListDataTemplate" x:DataType="data:Item">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
            <StackPanel Margin="20,20,0,0">
                <TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
                <TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
                    <TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{x:Bind Items}"
              ScrollViewer.VerticalScrollBarVisibility="Hidden"
              ItemClick="ListView_ItemClick" 
              IsItemClickEnabled="True" 
              ItemTemplate="{StaticResource ItemListDataTemplate}"
              >
    </ListView>
</Grid>

Can someone help me our please? Thank you very much for your time!

Upvotes: 1

Views: 2789

Answers (2)

Elvis Xia - MSFT
Elvis Xia - MSFT

Reputation: 10841

There are two ways to edit ListViewItemPresenter in your Page:

  1. You can copy the XAML Template from here (the first XAML codes block below Default Style). Add it to your Page.Resources. ListViewItemPresenter lies among those XAML codes, you can edit its Properties and this style will be applied to all the items of this page's ListView. Notes: don't add x:Key to this style.

  2. Add a ListViewItem Control to your Page like below:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListViewItem></ListViewItem>
</Grid>

    Document Outline->Select ListViewItem->Edit Template->Edit a Copy: enter image description here

Remove the x:Key Property of generated Style Resource, so that this style will be applied to all ListViewItem. Then you can edit the ListViewItemPresenter in the generated XAML Resource.

Upvotes: 2

DotNetRussell
DotNetRussell

Reputation: 9863

Just add your DataTemplate inside of the Listview.

Put it in the ItemTemplate property. 

   <ListView ItemsSource="{x:Bind Items}"
        ScrollViewer.VerticalScrollBarVisibility="Hidden"
        ItemClick="ListView_ItemClick" 
        IsItemClickEnabled="True" >
   <ListView.ItemTemplate>
      <DataTemplate>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
            <StackPanel Margin="20,20,0,0">
                <TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
                <TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
                    <TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </DataTemplate>     
  </ListView.ItemTemplate>

</ListView>

Upvotes: 0

Related Questions