带有旋转标签的 Xamarin.Forms Listview答案

【问题标题】：Xamarin.Forms Listview with rotated labels带有旋转标签的 Xamarin.Forms Listview
【发布时间】：2016-10-11 21:02:20
【问题描述】：

刚刚玩了Xamarin.Forms，我想创建一个带有旋转标签的ListView。我设法让标签旋转，但它们相互重叠。我猜 ListView Items Height 不适应旋转。

这是我的代码

  <ListView Grid.Column="0" x:Name="ListView" BackgroundColor="Black">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <ContentView Rotation="-90" VerticalOptions="FillAndExpand" HeightRequest="100">
            <Label BackgroundColor="#41b5e8" Text="{Binding}" HorizontalOptions="Center" VerticalOptions="Center"/>
          </ContentView>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

我尝试绑定到 Label Width，这似乎停止了重叠，但似乎没有考虑标签的边距。

  <ContentView Rotation="-90" VerticalOptions="FillAndExpand" HeightRequest="{Binding Source={x:Reference Label}, Path=Width}" >
     <Label x:Name="Label" BackgroundColor="#41b5e8" Text="{Binding}" HorizontalOptions="Center" VerticalOptions="Center" Margin="12"/>
  </ContentView>

更新 1：感谢 Adam Pedley，我现在可以正常进行轮换。现在我对标签的文本位置有疑问。我希望它在水平和垂直方向都居中，但是按照以下操作，我的文字会消失。

<Grid x:Name="Layout" Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="2*"/>
  </Grid.ColumnDefinitions>

  <ListView Grid.Column="0" x:Name="ListView" BackgroundColor="Green" SeparatorVisibility="None" HorizontalOptions="FillAndExpand">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <ContentView Rotation="-90" BackgroundColor="#41b5e8" VerticalOptions="FillAndExpand" HeightRequest="{Binding Source={x:Reference Label}, Path=Width}">
            <Label x:Name="Label" BackgroundColor="Red" Text="{Binding}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"  />
          </ContentView>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

  <Grid Grid.Column="1" HorizontalOptions="FillAndExpand">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid HorizontalOptions="FillAndExpand">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>

      <ContentView x:Name="Button1" HorizontalOptions="FillAndExpand" BindingContext="{Binding WeekDay}"/>
      <Button Text="DAY 2" Grid.Column="1" HorizontalOptions="FillAndExpand"/>
      <Button Text="DAY 3" Grid.Column="2" HorizontalOptions="FillAndExpand"/>

    </Grid>

  </Grid>

</Grid>

这样显示

如果我在Layout Grid 中将列定义更改为<ColumnDefinition Width="4*"/>，我明白了。

【问题讨论】：

你应该尝试用填充替换边距。

标签： listview xamarin.forms

【解决方案1】：

边距不包括在计算中，只有填充。因此，您需要向 ContentView 添加填充。

<ContentView Rotation="-90" VerticalOptions="FillAndExpand" HeightRequest="{Binding Source={x:Reference Label}, Path=Width}" Padding="12" >
     <Label x:Name="Label" BackgroundColor="#41b5e8" Text="{Binding}" HorizontalOptions="Center" VerticalOptions="Center" />
</ContentView>

【讨论】：

谢谢你，看来我快到了。知道如何解决文本位置问题吗？查看我的更新。
我不确定它在您的最终效果如何，但我会尝试将 HorizontalOptions、HorizontalTextAlignment、VerticalOptions 和 VerticalTextAlignment 添加到标签中。一个很好的技巧是同时设置标签和 ContentView 的背景颜色一些不同的颜色。然后它会向您显示哪个组件在哪里以及哪个元素导致了对齐问题。一旦我们知道是什么导致了问题，我们就可以专注于设置这些属性。
刚刚用屏幕截图更新了我的帖子，以便您了解问题所在。
@Gaz83 - 澄清一下，您希望图像看起来如何，因为您显示的第一个屏幕截图对我来说很合适，所以这一定意味着我误解了您需要的确切布局。跨度>
第一个屏幕截图看起来正确，Listview 中的项目位于Listview 的中心。当Listview 调整大小时，就像在第二个屏幕截图中一样，这些项目现在不在listview 的中心。