在CarouselView中控制元素的宽度

Question

所以我的应用程序中有一个CarouselView。在我的CarouselView中，我有一个带有长文本的标签。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="10*"/>
        <RowDefinition Height="65*"/>
        <RowDefinition Height="25*"/>
    </Grid.RowDefinitions>
    <CarouselView ItemsSource="{Binding .}" BackgroundColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center">
        <CarouselView.ItemsLayout>
            <GridItemsLayout SnapPointsAlignment="Center" SnapPointsType="MandatorySingle" Orientation="Horizontal" HorizontalItemSpacing="20"/>
       </CarouselView.ItemsLayout>
       <CarouselView.ItemTemplate>
           <DataTemplate>
               <Grid Grid.Row="1">
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="0.1*"/>
                       <ColumnDefinition Width="0.8*"/>
                       <ColumnDefinition Width="0.1*"/>
                   </Grid.ColumnDefinitions>
                   <Frame VerticalOptions="Fill" BackgroundColor="Accent" Grid.Column="1">
                       <StackLayout VerticalOptions="Center">
                           <Label Text="{Binding TextExample}"/>
                       </StackLayout>
                   </Frame>
                </Grid>
            </DataTemplate>
       </CarouselView.ItemTemplate>
    </CarouselView>
</grid>

我意识到，无论我做什么，CarouselView Frame的宽度都由标签中文本的长度控制-这意味着Frame超出了视图的边界。

尽管我可以将框架的widthrequest设置为所需的宽度，这将导致标签中的文字自动换行，因此意味着Frame的宽度不会超出边界视图。不幸的是，我宁愿更喜欢通过相对于视图的相对宽度百分比来控制Frame的宽度-我在上面的代码中尝试这样做。

Answer 1

Lucas Zhang的解决方案为我指出了正确的方法，尽管它有一些缺点。首先，它在App和ViewModel中需要大量代码，其主要缺陷是它没有响应，即用户转动屏幕时没有响应。

命名CarouselView，然后将DesiredWidh的{​​{1}}直接绑定到DataTemplate的{​​{1}}容易得多。

Width

Answer 2

原因：您似乎忘记了设置DataTemplate的宽度。因此，网格的宽度由标签中文本的长度控制。

解决方案：：在您的代码中，您似乎让DataTemplate的宽度等于屏幕的宽度。因此，您可以在代码后面绑定宽度。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Name="contentPage"   // set the name of the contentpage
             x:Class="xxx.MainPage">

<Grid WidthRequest="{Binding Source={x:Reference contentPage}, Path=BindingContext.Width}">
    <Grid.ColumnDefinitions>
         <ColumnDefinition Width="0.1*"/>
         <ColumnDefinition Width="0.8*"/>
         <ColumnDefinition Width="0.1*"/>
    </Grid.ColumnDefinitions>
    <Frame VerticalOptions="Fill" BackgroundColor="Accent" Grid.Column="1">
         <StackLayout VerticalOptions="Center">
                 <Label Text="{Binding xxx}"/>
         </StackLayout>
    </Frame>
</Grid>

在共享项目App.xaml.cs中

public static double ScreenWidth;
public static double ScreenHeight;

在Android MainActivity.cs中

protected override void OnCreate(Bundle savedInstanceState)
{
   TabLayoutResource = Resource.Layout.Tabbar;
   ToolbarResource = Resource.Layout.Toolbar;

   base.OnCreate(savedInstanceState);

   Xamarin.Essentials.Platform.Init(this, savedInstanceState);

   global::Xamarin.Forms.Forms.SetFlags("Shell_Experimental", "Visual_Experimental", "CollectionView_Experimental");
   global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

   App.ScreenWidth = Resources.DisplayMetrics.WidthPixels/Resources.DisplayMetrics.Density; 
   App.ScreenHeight =Resources.DisplayMetrics.HeightPixels/Resources.DisplayMetrics.Density; 

   LoadApplication(new App());
}

在iOS中

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    //...
    App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width;
    App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
    //...
}

在代码背后或ViewModel中

public double Width { get; private set; }

//...

Width = App.ScreenWidth;

Answer 3

您可以使用相对布局并相对于任何视图的宽度设置框架的宽度