我已经在这个编程问题上停留了一段时间了。我已经在Xamarin.Forms应用程序中设计了this屏幕。我卡住的部分将CollectionView居中放置,这是屏幕中堆叠月份的部分。我已经尝试过使用Margin,但这并不是最好的解决方案,因为它在每个屏幕上都会显示不同的内容。我试过弄乱StackLayout并将其HorizontalOptions设置为Center / Expand无效。即使直接将CollectionView设置为Center / Expand,CollectionView的内容仍将位于屏幕的“开始”对齐位置。我在这里很笨,不知道我在做什么错。请注意,此控件堆叠在主Grid的Grid.Row内部。
XAML粘贴在这里
<?xml version="1.0" encoding="utf-8" ?>
<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"
xmlns:converters="clr-namespace:Covid19Tracker.Converters;assembly=Covid19Tracker"
xmlns:i18n="clr-namespace:Covid19Tracker.Common;assembly=Covid19Tracker"
xmlns:chart1="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
mc:Ignorable="d"
FlowDirection="{x:Static Device.FlowDirection}"
BackgroundColor="#0c0e28"
NavigationPage.HasNavigationBar="False"
x:Class="Covid19Tracker.Views.MainView">
<ContentPage.Resources>
<ResourceDictionary>
<converters:FlowDirectionConverter x:Key="FlowDirectionConverter"/>
<converters:ListMarginConverter x:Key="MarginConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<RefreshView IsRefreshing="{Binding IsBusy, Mode=OneWay}" Command="{Binding RefreshCommand}">
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--Topbar-->
<Grid Padding="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" HeightRequest="22" WidthRequest="22" Source="menu.png"/>
<Label Grid.Column="1" Margin="30,0,0,0" FontSize="24" Text="{i18n:Translate TopbarLabel}"/>
<StackLayout Grid.Column="2" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Image HeightRequest="22" WidthRequest="22" Source="search.png"/>
<Image Margin="20,0,0,0" HeightRequest="22" WidthRequest="22" Source="options.png"/>
</StackLayout>
</Grid>
<!--Topbar-->
<!--Graph-->
<chart1:RadCartesianChart Grid.Row="1" HeightRequest="150" BackgroundColor="Transparent">
<chart1:RadCartesianChart.HorizontalAxis>
<chart1:CategoricalAxis MajorTickBackgroundColor="Transparent"
LabelTextColor="Transparent"
LineColor="Transparent"
LabelFitMode="MultiLine"
PlotMode="OnTicks" />
</chart1:RadCartesianChart.HorizontalAxis>
<chart1:RadCartesianChart.VerticalAxis>
<chart1:NumericalAxis MajorTickBackgroundColor="Transparent"
LineColor="Transparent"
LabelTextColor="Transparent"/>
</chart1:RadCartesianChart.VerticalAxis>
<chart1:RadCartesianChart.Series>
<chart1:SplineSeries
Stroke="#e32049"
ValueBinding="Value"
ItemsSource="{Binding InfectionHistory}"/>
<chart1:SplineSeries
Stroke="#2979ff"
ValueBinding="Value"
ItemsSource="{Binding RecoveredHistory}"/>
</chart1:RadCartesianChart.Series>
</chart1:RadCartesianChart>
<!--Graph-->
<!--Statistics-->
<Grid Grid.Row="2" Margin="15" HorizontalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Margin="20,0,0,0">
<Label HorizontalTextAlignment="{Binding Converter={StaticResource FlowDirectionConverter}}" FontSize="Large" Text="{Binding Recovered, StringFormat='{}{0:0,0}'}"/>
<Label FontSize="Medium" Text="{i18n:Translate txtRecovering}" TextColor="#2979ff"/>
</StackLayout>
<BoxView Grid.Row="1" Grid.Column="0" Margin="0,15,0,0" Color="#2979ff" HeightRequest="1" WidthRequest="180"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Margin="20,0,0,0">
<Label HorizontalTextAlignment="{Binding Converter={StaticResource FlowDirectionConverter}}" FontSize="Large" Text="{Binding Infected, StringFormat='{}{0:0,0}'}"/>
<Label FontSize="Medium" Text="{i18n:Translate txtInfections}" TextColor="#e32049"/>
</StackLayout>
<BoxView Grid.Row="1" Grid.Column="0" Margin="0,15,0,0" Color="#e32049" HeightRequest="1" WidthRequest="180" />
</Grid>
</Grid>
<!--Statistics-->
<!--Extended details-->
<CollectionView
x:Name="CollectionView"
Grid.Row="3"
SelectionMode="Single"
SelectionChangedCommand="{Binding SelectionChangedCommand}"
SelectionChangedCommandParameter="{Binding SelectedItem, Source={x:Reference CollectionView}}"
Margin="0,10,0,30"
ItemsSource="{Binding MonthModels}"
HeightRequest="30">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="70"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#0c0e28" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Label FontSize="Large" Text="{Binding MonthLabel}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor" Value="#4f516e"></Setter>
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Label>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<ListView
Grid.Row="4"
SeparatorVisibility="Default"
SeparatorColor="#232539"
HasUnevenRows="True"
HeightRequest="350"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
x:Name="ListView"
x:FieldModifier="public"
ItemsSource="{Binding ListViewItems}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label TextColor="White" Margin="{Binding Converter={StaticResource MarginConverter}}" Text="{Binding date, StringFormat='{}{0:MMMM dd}'}" />
<StackLayout Orientation="Horizontal" Grid.Column="1">
<Image Margin="0,0,6,0" WidthRequest="6" HeightRequest="6" Source="BluePoly.png"/>
<Label TextColor="#2774f5" Text="{Binding recovered, StringFormat='{}{0:0,0}'}" />
</StackLayout>
<StackLayout Orientation="Horizontal" Grid.Column="2">
<Image Margin="0,0,6,0" WidthRequest="6" HeightRequest="6" Source="RedPoly.png"/>
<Label TextColor="#e32049" Text="{Binding infected, StringFormat='{}{0:0,0}'}" />
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--Extended details-->
</Grid>
</ScrollView>
</RefreshView>
</ContentPage.Content>
</ContentPage>
我希望我正确提出了这个问题,以便获得认真的帮助,而不是“阅读FAQ”
答案 0 :(得分:0)
您可以在标签的左侧和右侧添加一个额外的列。
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*" />
<ColumnDefinition Width="0.8*" />
<ColumnDefinition Width="0.1*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="1" FontSize="Large" Text="{Binding MonthLabel}" HorizontalTextAlignment="Center" >
现在标签将显示在屏幕中央
您还可以将整个CollectionView放在第二个
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*" />
<ColumnDefinition Width="0.8*" />
<ColumnDefinition Width="0.1*" />
</Grid.ColumnDefinitions>
<!--Extended details-->
<CollectionView
Grid.Column="1"
//...>
//...
</CollectionView>
</Grid>
答案 1 :(得分:0)
这就是我解决集合居中的方法。你会在这里找到它: