Search code examples
c#xamlxamarin.formswidth

How do I adjust the size of the CarouselView in the Grid?


I have a Grid. On one line is the CarouselView.

<Grid Margin="0, 20, 0, 0">
 <Grid.RowDefinitions>
     <RowDefinition />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
      <ColumnDefinition Width="130"/>
      <ColumnDefinition/>
 </Grid.ColumnDefinitions>
  <CarouselView x:Name="GamesCarouselView" Margin="25, 5, 0, 0" HeightRequest="120" Grid.ColumnSpan="2" >
       <CarouselView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal"/>
            </CarouselView.ItemsLayout> 
        <CarouselView.ItemTemplate>
        <DataTemplate>
            <ImageButton BackgroundColor="#fafafa" Source="{Binding .}" CornerRadius="13" BorderColor="#1976d3" BorderWidth="4"/>
        </DataTemplate> 
   </CarouselView.ItemTemplate>
   </CarouselView>   
  </Grid>

Width of photos from CarouselView occupies the entire length of the screen. How can I resize it?


Solution

  • Use a Grid (or the Layout you want) in your DataTemplate and add your Image/ImageButton with the alignement and dimensions you expect:

     <Grid Margin="0, 20, 0, 0">
         <Grid.RowDefinitions>
             <!--One RowDefinition in * si useless by the way -->
             <RowDefinition />
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
              <ColumnDefinition Width="130"/>
              <ColumnDefinition/>
         </Grid.ColumnDefinitions>
          <CarouselView x:Name="GamesCarouselView" Margin="25, 5, 0, 0" HeightRequest="120" Grid.ColumnSpan="2" >
               <CarouselView.ItemsLayout>
                    <LinearItemsLayout Orientation="Horizontal"/>
                    </CarouselView.ItemsLayout> 
                <CarouselView.ItemTemplate>
            <DataTemplate>
               <Grid>
                    <ImageButton HorizontalOptions="Center" WidthRequest="100" BackgroundColor="#fafafa" Source="{Binding .}" CornerRadius="13" BorderColor="#1976d3" BorderWidth="4"/>
               </Grid>
            </DataTemplate>
        
           </CarouselView.ItemTemplate>
          </CarouselView>   
     </Grid>