CODEWITHSUNDEEP
c#xamlxamarin.formswidth
Kirill
Kirill

Reputation: 47

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?

Upvotes: 0

Views: 588

Answers (1)

Rudy Spano
Rudy Spano

Reputation: 1421

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>

Upvotes: 1

Related Questions