Xamarin.Forms。 Collectionview 在其内容后添加了很多额外的白色 space
Xamarin.Forms. Collectionview adds a lot of extra white space after its content
我希望集合视图的内容后面没有空space
我试图将我的按钮放在页脚中,但后来我 运行 遇到了问题,即 属性 isenabled = false 没有在我后面的代码中应用到它。
这是我的 xaml 文件:
<ContentPage.Content>
<RefreshView x:DataType="local:QuestionViewModel" Command="{Binding LoadCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
<ScrollView>
<StackLayout>
<views:MyTextView LaTeX="{Binding Formulation}" HorizontalOptions="Center" Margin="15, 10, 15, 0"/>
<!--<RefreshView x:DataType="local:QuestionViewModel" Command="{Binding LoadCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">-->
<CollectionView
ItemsSource="{Binding Answers, Mode=TwoWay}"
SelectedItems="{Binding SelectedAnswers, Mode=TwoWay}"
SelectionMode="Multiple"
x:Name="collectionView"
SelectionChanged="collectionView_SelectionChanged"
>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Answer">
<StackLayout Padding="10">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal">
<VisualState.Setters>
<Setter TargetName="frame" Property="Frame.BackgroundColor" Value="{Binding AnswerColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter TargetName="frame" Property="Frame.BackgroundColor" Value="{DynamicResource MainColor}"/>
<Setter TargetName="label" Property="views:MyTextView.TextColor" Value="White"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Frame CornerRadius="10" HasShadow="True" x:Name="frame" BackgroundColor="{Binding AnswerColor}">
<views:MyTextView x:Name="label" LaTeX="{Binding Content}" />
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<!--</RefreshView>-->
<StackLayout>
<Label x:Name="conditionLabel" TextColor="{DynamicResource AnswerColor}"/>
<Button x:Name="checkButton" Text="Проверить ответы" CornerRadius="10" Margin="10"
Command="{Binding CheckAnswersCommand}"/>
</StackLayout>
</StackLayout>
</ScrollView>
</RefreshView>
</ContentPage.Content>
结果:
1 part of screen
2 part of screen
不幸的是,这是一个已知问题,open issue。
查看该线程以了解可能的解决方法。并跟踪修复它的任何进展。
底线:您必须手动 specify/calculate 高度。有多种方法可以做到,难度各不相同。主题提到了一些。您需要 Google 了解更多详情。
我喜欢的一个快速而肮脏的解决方案(如果可接受)是将 CollectionView 包装在 Grid 中,然后使用 RowDefinitions 强制为包含 CollectionView 的行指定多少高度,为其他所有内容指定多少高度。类似于:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<CollectionView Grid.Row="0" ...>
...
</CollectionView>
<StackLayout Grid.Row = "1" ...>
... everything that is below the CV ...
</StackLayout>
</Grid>
这会将第 0 行(包含 CollectionView)限制在屏幕的顶部 1/3。
您不应该按照官方文档中的描述在 Scrollview 中使用 Listview/CollectionView。
在 Scrollview 中有一个替代列表视图的方法。看下面的代码:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ScrollViewDemos"
x:Class="ScrollViewDemos.Views.ColorListPage"
Title="ScrollView demo">
<ScrollView>
<StackLayout BindableLayout.ItemsSource="{x:Static local:NamedColor.All}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<BoxView Color="{Binding Color}"
HeightRequest="32"
WidthRequest="32"
VerticalOptions="Center" />
<Label Text="{Binding FriendlyName}"
FontSize="24"
VerticalOptions="Center" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</ContentPage>
关注文档以获得更多支持:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scrollview
我希望集合视图的内容后面没有空space
我试图将我的按钮放在页脚中,但后来我 运行 遇到了问题,即 属性 isenabled = false 没有在我后面的代码中应用到它。 这是我的 xaml 文件:
<ContentPage.Content>
<RefreshView x:DataType="local:QuestionViewModel" Command="{Binding LoadCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
<ScrollView>
<StackLayout>
<views:MyTextView LaTeX="{Binding Formulation}" HorizontalOptions="Center" Margin="15, 10, 15, 0"/>
<!--<RefreshView x:DataType="local:QuestionViewModel" Command="{Binding LoadCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">-->
<CollectionView
ItemsSource="{Binding Answers, Mode=TwoWay}"
SelectedItems="{Binding SelectedAnswers, Mode=TwoWay}"
SelectionMode="Multiple"
x:Name="collectionView"
SelectionChanged="collectionView_SelectionChanged"
>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Answer">
<StackLayout Padding="10">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal">
<VisualState.Setters>
<Setter TargetName="frame" Property="Frame.BackgroundColor" Value="{Binding AnswerColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter TargetName="frame" Property="Frame.BackgroundColor" Value="{DynamicResource MainColor}"/>
<Setter TargetName="label" Property="views:MyTextView.TextColor" Value="White"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Frame CornerRadius="10" HasShadow="True" x:Name="frame" BackgroundColor="{Binding AnswerColor}">
<views:MyTextView x:Name="label" LaTeX="{Binding Content}" />
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<!--</RefreshView>-->
<StackLayout>
<Label x:Name="conditionLabel" TextColor="{DynamicResource AnswerColor}"/>
<Button x:Name="checkButton" Text="Проверить ответы" CornerRadius="10" Margin="10"
Command="{Binding CheckAnswersCommand}"/>
</StackLayout>
</StackLayout>
</ScrollView>
</RefreshView>
</ContentPage.Content>
结果: 1 part of screen 2 part of screen
不幸的是,这是一个已知问题,open issue。
查看该线程以了解可能的解决方法。并跟踪修复它的任何进展。
底线:您必须手动 specify/calculate 高度。有多种方法可以做到,难度各不相同。主题提到了一些。您需要 Google 了解更多详情。
我喜欢的一个快速而肮脏的解决方案(如果可接受)是将 CollectionView 包装在 Grid 中,然后使用 RowDefinitions 强制为包含 CollectionView 的行指定多少高度,为其他所有内容指定多少高度。类似于:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<CollectionView Grid.Row="0" ...>
...
</CollectionView>
<StackLayout Grid.Row = "1" ...>
... everything that is below the CV ...
</StackLayout>
</Grid>
这会将第 0 行(包含 CollectionView)限制在屏幕的顶部 1/3。
您不应该按照官方文档中的描述在 Scrollview 中使用 Listview/CollectionView。
在 Scrollview 中有一个替代列表视图的方法。看下面的代码:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ScrollViewDemos"
x:Class="ScrollViewDemos.Views.ColorListPage"
Title="ScrollView demo">
<ScrollView>
<StackLayout BindableLayout.ItemsSource="{x:Static local:NamedColor.All}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<BoxView Color="{Binding Color}"
HeightRequest="32"
WidthRequest="32"
VerticalOptions="Center" />
<Label Text="{Binding FriendlyName}"
FontSize="24"
VerticalOptions="Center" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</ContentPage>
关注文档以获得更多支持: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scrollview