我正在尝试创建一个列表视图选择器,并且希望列表视图在位于页面末尾时,在显示所选项的视图的顶部显示自身。如果列表视图位于页面末尾,则用户在单击所选项时将无法访问列表。
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Name="ComboBoxView"
BindingContext="{x:Reference ComboBoxView}"
x:Class="MauiApp1.ComboBoxNew">
<Grid RowDefinitions="Auto,*" >
<Frame HasShadow="False" Padding="5" CornerRadius="0" BorderColor="Gray" Grid.Row="0">
<Grid Padding="5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ColumnDefinitions="75*,25*" >
<Label Text="{Binding Source={Reference ComboBoxView}, Path=SelectedItem }" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="Fill" />
<ImageButton Source="arrowdown" Grid.Column="1" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="25" WidthRequest="25" ></ImageButton>
</Grid>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="OpenListItemsClickedEvent" />
</Frame.GestureRecognizers>
</Frame>
<Grid Grid.Row="1" x:Name="ComboElementsList" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowDefinitions="Auto,*" >
<Image Grid.Row="0" HeightRequest="15" WidthRequest="15" Source="arrowup" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ></Image>
<CollectionView Grid.Row="1" ItemsSource="{Binding Source={Reference ComboBoxView},Path=ItemSource}" Unfocused="ListUnfocusedEvent" x:Name="ComboListElements" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HeightRequest="40" >
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="0" Padding="15" HasShadow="True" BorderColor="Gray">
<Label Text="{Binding .}" />
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="ItemSelectedFromListViewEvent" CommandParameter="{Binding .}" />
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</Grid>
</ContentView>
using System.Collections.ObjectModel;
namespace MauiApp1;
public partial class ComboBoxNew : ContentView
{
public ComboBoxNew()
{
InitializeComponent();
ComboListElements.Opacity = 0;
ComboElementsList.Opacity = 0;
}
protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
{
return base.OnMeasure(widthConstraint, heightConstraint);
}
public static readonly BindableProperty ItemSourceProperty = BindableProperty.Create("ItemSource", typeof(ObservableCollection<string>), typeof(ObservableCollection<string>), null, BindingMode.TwoWay, propertyChanged: ItemSourceChangedEvent);
public ObservableCollection<string> ItemSource
{
get => (ObservableCollection<string>)GetValue(ItemSourceProperty);
set => SetValue(ItemSourceProperty, value);
}
public static readonly BindableProperty SelectedItemProperty = BindableProperty.Create("SelectedItem", typeof(string), typeof(string), string.Empty, BindingMode.TwoWay);
public string SelectedItem
{
get => (string)GetValue(SelectedItemProperty);
set => SetValue(SelectedItemProperty, value);
}
private void OpenListItemsClickedEvent(object sender, EventArgs e)
{
ComboListElements.FadeTo(1, 500, Easing.Linear);
ComboElementsList.FadeTo(1, 500, Easing.Linear);
var Xitem = ComboListElements.X;
var Yitem = ComboListElements.Y;
}
private void ListUnfocusedEvent(object sender, FocusEventArgs e)
{
ComboListElements.FadeTo(0, 500, Easing.Linear);
ComboElementsList.FadeTo(0, 500, Easing.Linear);
}
private void ItemSelectedFromListViewEvent(object sender, EventArgs e)
{
var clickedValue = ((e as TappedEventArgs).Parameter) as string;
SelectedItem = clickedValue;
ComboListElements.FadeTo(0, 500, Easing.Linear);
ComboElementsList.FadeTo(0, 500, Easing.Linear);
}
private static void ItemSourceChangedEvent(BindableObject bindable, object oldValue, object newValue)
{
if (bindable is ComboBoxNew comboBoxNew && newValue != null && newValue is ObservableCollection<string> newItemSource)
{
comboBoxNew.SelectedItem = newItemSource.FirstOrDefault();
}
}
}
1条答案
按热度按时间lx0bsm1f1#
我以为你想改变ComboBoxNew ContentView的位置。你可以在UI改变时设置它的翻译。就像下面的代码:
希望对你有用。