Set the width of an item inside the collection view?

I am currently trying to set the width of the items inside a CollectionView, this because I intend to check if the screen has more space, I can make my CollectionView a 2 column list instead of 1. However, when I set the property WidthRequest to something in the StackLayout, the behaviour is not the one I expect.

Without the WidthRequest:

With WidthRequest:

Code:

 <ContentPage.Content>
        <Grid RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <CollectionView
                Grid.Row="0"
                ItemsSource="{Binding Items}"
                SelectionMode="None">
                <d:CollectionView.ItemsSource>
                    <x:Array Type="{x:Type models:FighterRowView}">
                        <models:FighterRowView
                            Name="Jason Lee Scott"
                            Id="0" />
                        <models:FighterRowView
                            Name="Tommy Oliver"
                            Id="1"/>
                        <models:FighterRowView
                            Name="Gia Moran"
                            Id="2" />
                        <models:FighterRowView
                            Name="Anubis Doggie Cruger"
                            Id="3" />
                    </x:Array>
                </d:CollectionView.ItemsSource>
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="models:FighterRowView">
                        <StackLayout Spacing="{StaticResource StandardSpacingDouble}" WidthRequest="300">
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding ClickedCommand}" />
                            </StackLayout.GestureRecognizers>
                            <border:SfBorder
                                Margin="{StaticResource StandardSpacing}"
                                BackgroundColor="{StaticResource PrimaryColor}"
                                BorderColor="{StaticResource ButtonBorderColor}"
                                BorderWidth="{StaticResource RosterBorderWidth}"
                                CornerRadius="{StaticResource RosterCornerRadius}">
                                <Grid ColumnSpacing="0" RowSpacing="0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Label
                                        Grid.Column="0"
                                        Margin="{StaticResource StandardSpacing}"
                                        FontFamily="{DynamicResource MontserratBoldItalic}"
                                        FontSize="Large"
                                        LineBreakMode="WordWrap"
                                        Text="{Binding Name}"
                                        VerticalOptions="Center" />
                                </Grid>
                            </border:SfBorder>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
            <views:AdControlView
                Grid.Row="1"
                AdUnit="{Binding AdUnit}"
                BackgroundColor="{StaticResource AccentColor}"
                IsVisible="{Binding DisplayAd}" />
        </Grid>
    </ContentPage.Content>

Best Answer

Answers

  • mjdevelopermjdeveloper Member ✭✭✭
    edited December 2019

    Hi,
    I think this is the default behavior of StackLayout and it fills up within its parent and will only affect its content by adjusting the width.

    If You want to your CallectionView has special width you can put it inside grid like;

    <Grid.ColumnDefinitions>
           <ColumnDefinition Width="300"/>
            <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <CollectionView Grid.Column="0"
    

    Or put your StackLayout (that it is inside DataTemplate) inside a grid like above.

  • Umar3xUmar3x FRMember ✭✭✭
    edited December 2019

    That's not an issue with CollectionView, that's an issue with your layout.

    You are using SfBorder INSIDE the StackLayout. As you can see on your screenshot, your stacklayout takes the Width/Height you request it to have. Not the border. So, simply remove this from stacklayout and apply the fixed height/width to the SfBorder instead. The StackLayout will adapt its size.

           <DataTemplate x:DataType="models:FighterRowView">
                        <StackLayout Spacing="{StaticResource StandardSpacingDouble}">
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding ClickedCommand}" />
                            </StackLayout.GestureRecognizers>
                            <border:SfBorder WidthRequest="300"
                                             HeightRequest="300"
                                             Margin="{StaticResource StandardSpacing}"
                                             BackgroundColor="{StaticResource PrimaryColor}"
                                             BorderColor="{StaticResource ButtonBorderColor}"
                                             BorderWidth="{StaticResource RosterBorderWidth}"
                                             CornerRadius="{StaticResource RosterCornerRadius}">
                                <Grid ColumnSpacing="0" RowSpacing="0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Label Grid.Column="0"
                                           Margin="{StaticResource StandardSpacing}"
                                           FontFamily="{DynamicResource MontserratBoldItalic}"
                                           FontSize="Large"
                                           LineBreakMode="WordWrap"
                                           Text="{Binding Name}"
                                           VerticalOptions="Center" />
                                </Grid>
                            </border:SfBorder>
                        </StackLayout>
                    </DataTemplate> 
    
  • albertoha94albertoha94 Member ✭✭

    Hello @Umar3x
    I tried like you requested it but it doesn't seem to do what i expected.

    Code:

    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:FighterRowView">
                            <StackLayout Spacing="{StaticResource StandardSpacingDouble}">
                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding ClickedCommand}" />
                                </StackLayout.GestureRecognizers>
                                <border:SfBorder
                                    Margin="{StaticResource StandardSpacing}"
                                    BackgroundColor="{StaticResource PrimaryColor}"
                                    BorderColor="{StaticResource ButtonBorderColor}"
                                    BorderWidth="{StaticResource RosterBorderWidth}"
                                    CornerRadius="{StaticResource RosterCornerRadius}"
                                    HeightRequest="50"
                                    WidthRequest="50">
                                    <Label
                                        Grid.Column="0"
                                        Margin="{StaticResource StandardSpacing}"
                                        FontFamily="{DynamicResource MontserratBoldItalic}"
                                        FontSize="Large"
                                        LineBreakMode="WordWrap"
                                        Text="{Binding Name}"
                                        VerticalOptions="Center" />
                                </border:SfBorder>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
    

    Result:

  • albertoha94albertoha94 Member ✭✭

    @mjdeveloper Hello and thanks for the reply but i don't think this is the answer i look for.
    If i reduce the size like you mention, ther user wont be able to scroll through all the screen, I just want the items inside to reduce.

  • LuiCLuiC USMember ✭✭

    Why do you need to set a width request to check if you can do 1 or two columns?
    It seems unrelated and unnecessary.

    React on a size related event, check the width of the collectionview and change the collectionview to use the adequate number of columns...

  • mjdevelopermjdeveloper Member ✭✭✭
    edited December 2019

    Could you show us a photo (or Painting) of what you want?

  • albertoha94albertoha94 Member ✭✭

    Thx for the support and sorry for the late reply ppl.
    @LuiC Yeah, i think i'm taking the wrong approach here.
    What i intend to do is, when the screen is over 600 width, I want to set the amount of columns in the page to be of 2.
    I want this to also happen when the device is rotated, that means that if i switch my device to landscape and the width is over 600, then make it 2 columns too.
    @mjdeveloper I took a screenshot and made an small edit of i want.
    What i intend to do is have 2 columns when width is over 600.

  • mjdevelopermjdeveloper Member ✭✭✭

    Hi @albertoha94.
    Did your issue solve? if yes, please mark the post as answer.

Sign In or Register to comment.