CODEWITHSUNDEEP
c#telerikuwpradlistview
Ann Yu
Ann Yu

Reputation: 137

How to resize the container's height of listviewitem of Telerik UI for UWP

It's the first time I use Telerik UI for UWP. And I add the listview to xaml:

<telerikDataControls:RadListView x:Name="rlvProducts" Grid.Row="1" IsCheckModeActive="True" FontSize="12">
<telerikDataControls:RadListView.ItemTemplate>
    <DataTemplate >
        <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
    </DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>

I get the listview like this: enter image description here

You can see that the item height is too much.

I tried to reset the font size, the height of the textblock of the template, but it didn't work.

Can anyone tell me how to resize the height of listviewitem? Thanks a lot.

Upvotes: 0

Views: 412

Answers (2)

Lance McCarthy
Lance McCarthy

Reputation: 1917

You can apply a custom RadListViewItem style, like this:

<data:RadListView>
    <data:RadListView.ItemTemplate>
        <DataTemplate>
            <TextBlock ... />
        </DataTemplate>
    </data:RadListView.ItemTemplate>
    <data:RadListView.ItemStyle>
        <Style TargetType="listView:RadListViewItem">
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="MinHeight" Value="0" />
            <Setter Property="Padding" Value="0" />
        </Style>
    </data:RadListView.ItemStyle>
</data:RadListView>

You can of course further tweak the Style to meet your needs.

For more information on ItemStyling, including ItemSwipe styling, see this article.

Upvotes: 1

tchrikch
tchrikch

Reputation: 2468

You can use <fieldset> tag within item template to control it, e.g :

 <telerikDataControls:RadListView x:Name="rlvProducts" Grid.Row="1" IsCheckModeActive="True" FontSize="12">
  <telerikDataControls:RadListView.ItemTemplate>
    <fieldset  style="float: left; width: 350px; height: 150px;/>
    <DataTemplate >... </DataTemplate>
  </telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>

See here for more details: doc

Upvotes: 0

Related Questions