带有旋转标签的Xamarin.Forms Listview

时间:2016-10-11 21:02:21

标签: listview xamarin.forms

只是玩Xamarin.Forms,我想创建一个带有旋转标签的ListView。我设法让标签旋转,但它们相互重叠。我猜测ListView项目高度不适应旋转。

这是我的代码

  <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: 感谢亚当佩德利,我现在轮换工作正常。现在我对标签的文本位置有疑问。我希望它在水平和垂直方向都是中心,但是执行以下操作时我的文字会显示出来。

<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>

显示如下

enter image description here

如果我在<ColumnDefinition Width="4*"/>中将列定义更改为Layout Grid,我就明白了。 enter image description here

1 个答案:

答案 0 :(得分: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>