CODEWITHSUNDEEP
c#xamluwp
Annamalai S
Annamalai S

Reputation: 127

UWP Listview with itemswrapgrid setting width based on items content

I have an Listview with togglebuttons in datatemplate in UWP. I have configured the listview as itemwrapgrid. I am trying to assign diffrent width for items based on toggle buttons content length. Can anyone help me to do this.

 <ListView x:Name="lstVw1" IsMultiSelectCheckBoxEnabled="True" Margin="0,20,0,0">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid Orientation="Horizontal" Width="Auto" HorizontalAlignment="Stretch"></ItemsWrapGrid>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ToggleButton Style="{StaticResource ButtonStyle}" Content="{Binding ItemText}" Click="ToggleButton_Click">
                            </ToggleButton>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />

                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <ContentPresenter Padding="5"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>

                    </ListView.ItemContainerStyle>
                </ListView>

The above xaml gives equaly sized toggle buttons in the list

Upvotes: 1

Views: 1310

Answers (3)

Ivan I
Ivan I

Reputation: 9990

It works exactly like that by default - ItemTemplate will expand to fit the content. You might need to use ItemsStackPanel as ItemsPanelTemplate.

What you did wrong is this line, you should remove it:

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

Upvotes: 0

Shawn Kendrot
Shawn Kendrot

Reputation: 12465

I would use the WrapPanel from the UWP Community Toolkit. You can download the nuget package and then change your ItemsPanel of your ListView to be a WrapPanel

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <wrapPanel:WrapPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

Note that the WrapPanel was accidentally put into the Microsoft.Toolkit.Uwp.Controls.WrapPanel namespace, so you'll need to declare the wrapPanel namespace in your XAML

xmlns:wrapPanel="using:Microsoft.Toolkit.Uwp.Controls.WrapPanel"

Upvotes: 3

Annamalai S
Annamalai S

Reputation: 127

I have created a custom wrap panel for the above.

Reference

Upvotes: 0

Related Questions