xaml – 强制视图为方形

2023年9月15日 196次阅读

我正在尝试在XAML中为Xamarin Forms创建一个UI,其中我有一个框架(虽然我假设答案对于任何类型的视图都是相同的)在网格内部.我希望框架在它占据的网格单元格中使用可用的全宽度,但我想强制它为方形.所以,我希望宽度自动调整大小,并设置高度以匹配其实际宽度.

这是我到目前为止所拥有的：

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="2*"/>
      <ColumnDefinition Width="6*"/>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="13*"/>
      <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>

    <Button Grid.Row="0" Grid.Column="1"/>
    <Button Grid.Row="1" Grid.Column="1"/>
    <Button Grid.Row="2" Grid.Column="1"/>
    <Frame Grid.Row="0" Grid.Column="3" Grid.RowSpan="3" OutlineColor="Silver" HorizontalOptions="Fill">
      <Image />
    </Frame>
  </Grid>

目前,框架正确填充可用宽度,但高度与其左侧3个按钮的总高度大致相同.

我想我可能需要将框架的HeightRequest绑定到它的实际宽度,但我不知道这是否可能,或者如果它是如何做到的.如果没有,还有其他选择吗？

最佳答案 由于您将帧的RowSpan设置为3,即使您将帧的HeightRequest显式设置为某个较小的值,该帧仍将占用整个网格的高度.所以首先你必须防止这种情况发生.你可以通过在其他视图中包含框架来做到这一点.

现在,为了使框架的高度和宽度与缩放相同,您可以使用容器的SizeChanged事件并相应地设置框架的高度和宽度请求.

另请注意,默认情况下,Frame的填充为20.

这是xaml的示例代码：

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="6*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="13*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="1"/>
        <Button Grid.Row="1" Grid.Column="1"/>
        <Button Grid.Row="2" Grid.Column="1"/>

        <StackLayout x:Name="frmContainer" Grid.Row="0" Grid.Column="3" Grid.RowSpan="3" BackgroundColor="Orange">
            <Frame x:Name="frm" OutlineColor="Silver" VerticalOptions="Center" HorizontalOptions="Center" Padding="0" BackgroundColor="Green"/>
        </StackLayout>
    </Grid>

这是代码隐藏中的构造函数：

    InitializeComponent();

    frmContainer.SizeChanged += (s, e) =>
    {
        frm.HeightRequest = frmContainer.Width;

        if (frmContainer.Width > frmContainer.Height)
        {
            frm.WidthRequest = frmContainer.Height;
        }
        else
        {
            frm.WidthRequest = frmContainer.Width;
        }
    };
点赞