Xamarin.forms Xamarin表单:如何将项目列表设置为扩展子项?
我正在使用Xamarin.forms Xamarin表单:如何将项目列表设置为扩展子项?,xamarin.forms,expander,Xamarin.forms,Expander,我正在使用扩展器来显示一本书的单元和章节。我可以将单位显示为Expander.Header,但单位下的章节还是一个列表。我试着像下面一样,但章节无法在UI上查看 XAML <StackLayout BindableLayout.ItemsSource="{Binding AllItems,Mode=TwoWay}"> <BindableLayout.ItemTemplate> <DataTemplate>
扩展器
来显示一本书的单元和章节。我可以将单位显示为Expander.Header
,但单位下的章节还是一个列表。我试着像下面一样,但章节无法在UI上查看
XAML
<StackLayout BindableLayout.ItemsSource="{Binding AllItems,Mode=TwoWay}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Expander
ExpandAnimationEasing="{x:Static Easing.CubicIn}"
ExpandAnimationLength="500"
CollapseAnimationEasing="{x:Static Easing.CubicOut}"
CollapseAnimationLength="500">
<Expander.Header>
<StackLayout
Orientation="Horizontal">
<Label
Text="{Binding unit.title}"
TextColor="Black"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
FontSize="18"
VerticalTextAlignment="Center"
VerticalOptions="CenterAndExpand">
</Label>
</StackLayout>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<StackLayout
Orientation="Horizontal">
<Label
HorizontalOptions="Start"
Text="{Binding contentList.title}"
VerticalOptions="CenterAndExpand"
FontSize="16"
TextColor="Black">
</Label>
</StackLayout>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
视图模型
private List<BookContentList> _allItems;
public List<BookContentList> AllItems
{
get
{ return _allItems; }
set
{
_allItems = value;
OnPropertyChanged("AllItems");
}
}
//setting data
AllItems = bookDetails.bookContentList;
private List\u allItems;
公共列表所有项目
{
得到
{return\u allItems;}
设置
{
_allItems=值;
不动产变更(“AllItems”);
}
}
//设置数据
AllItems=bookDetails.bookContentList;
我的问题是每个单元下的章节没有显示在UI上。我上传了一个示例项目以供参考。
我还需要知道如何获得所选章节的完整详细信息?使用Expander.ContentTemplate内部的可绑定布局:
<Expander.ContentTemplate>
<DataTemplate>
<StackLayout BindableLayout.ItemsSource="{Binding contentList,Mode=TwoWay}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text={Binding title}/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</DataTemplate>
</Expander.ContentTemplate>
希望这能奏效 您的代码中有两个错误
BindableLayout.ItemTemplate
<StackLayout Orientation="Vertical">
<Button
Text="click Me"
IsVisible="False"
BackgroundColor="Red"
x:Name="button"
Clicked="ButtonClick"/>
<StackLayout x:Name="expanderLayout" IsVisible="False" BindableLayout.ItemsSource="{Binding AllItems,Mode=TwoWay}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Expander
ExpandAnimationEasing="{x:Static Easing.CubicIn}"
ExpandAnimationLength="500"
CollapseAnimationEasing="{x:Static Easing.CubicOut}"
CollapseAnimationLength="500">
<Expander.Header>
<Frame
Padding="2"
Margin="5"
HasShadow="False"
BorderColor="#fdeec7"
CornerRadius="0">
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Orientation="Horizontal">
<Label
Text="{Binding unit.title}"
TextColor="Black"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
VerticalOptions="CenterAndExpand">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>18</OnIdiom.Phone>
<OnIdiom.Tablet>36</OnIdiom.Tablet>
<OnIdiom.Desktop>18</OnIdiom.Desktop>
</OnIdiom>
</Label.FontSize>
</Label>
<StackLayout.Margin>
<OnIdiom x:TypeArguments="Thickness">
<OnIdiom.Phone>5</OnIdiom.Phone>
<OnIdiom.Tablet>8</OnIdiom.Tablet>
<OnIdiom.Desktop>5</OnIdiom.Desktop>
</OnIdiom>
</StackLayout.Margin>
<StackLayout.Padding>
<OnIdiom x:TypeArguments="Thickness">
<OnIdiom.Phone>5</OnIdiom.Phone>
<OnIdiom.Tablet>8</OnIdiom.Tablet>
<OnIdiom.Desktop>5</OnIdiom.Desktop>
</OnIdiom>
</StackLayout.Padding>
</StackLayout>
</Frame>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<StackLayout BindableLayout.ItemsSource="{Binding contentList,Mode=TwoWay}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout
Orientation="Horizontal">
<Label
HorizontalOptions="Start"
Text="{Binding title}"
VerticalOptions="CenterAndExpand"
TextColor="Black">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>16</OnIdiom.Phone>
<OnIdiom.Tablet>32</OnIdiom.Tablet>
<OnIdiom.Desktop>16</OnIdiom.Desktop>
</OnIdiom>
</Label.FontSize>
<Label.GestureRecognizers>
<TapGestureRecognizer
Tapped="LoadChapter"
CommandParameter="{Binding .}"
NumberOfTapsRequired="1">
</TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
@khushal Mistry:最好在代码中留下简短的描述-例如,为什么您的解决方案有效和/或OP可以做得更好等等。代码不正确,StackLayout应该有
BindableLayout.ItemTemplate
来定义datatemplate。请检查我在方法LoadChapter
中的修改。我有几乎相同的示例,但它无法在Expander标头中绑定AllItems子项。它说,绑定:在ViewModel上找不到属性“unit.Title”。
<StackLayout Orientation="Vertical">
<Button
Text="click Me"
IsVisible="False"
BackgroundColor="Red"
x:Name="button"
Clicked="ButtonClick"/>
<StackLayout x:Name="expanderLayout" IsVisible="False" BindableLayout.ItemsSource="{Binding AllItems,Mode=TwoWay}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Expander
ExpandAnimationEasing="{x:Static Easing.CubicIn}"
ExpandAnimationLength="500"
CollapseAnimationEasing="{x:Static Easing.CubicOut}"
CollapseAnimationLength="500">
<Expander.Header>
<Frame
Padding="2"
Margin="5"
HasShadow="False"
BorderColor="#fdeec7"
CornerRadius="0">
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Orientation="Horizontal">
<Label
Text="{Binding unit.title}"
TextColor="Black"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
VerticalOptions="CenterAndExpand">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>18</OnIdiom.Phone>
<OnIdiom.Tablet>36</OnIdiom.Tablet>
<OnIdiom.Desktop>18</OnIdiom.Desktop>
</OnIdiom>
</Label.FontSize>
</Label>
<StackLayout.Margin>
<OnIdiom x:TypeArguments="Thickness">
<OnIdiom.Phone>5</OnIdiom.Phone>
<OnIdiom.Tablet>8</OnIdiom.Tablet>
<OnIdiom.Desktop>5</OnIdiom.Desktop>
</OnIdiom>
</StackLayout.Margin>
<StackLayout.Padding>
<OnIdiom x:TypeArguments="Thickness">
<OnIdiom.Phone>5</OnIdiom.Phone>
<OnIdiom.Tablet>8</OnIdiom.Tablet>
<OnIdiom.Desktop>5</OnIdiom.Desktop>
</OnIdiom>
</StackLayout.Padding>
</StackLayout>
</Frame>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<StackLayout BindableLayout.ItemsSource="{Binding contentList,Mode=TwoWay}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout
Orientation="Horizontal">
<Label
HorizontalOptions="Start"
Text="{Binding title}"
VerticalOptions="CenterAndExpand"
TextColor="Black">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>16</OnIdiom.Phone>
<OnIdiom.Tablet>32</OnIdiom.Tablet>
<OnIdiom.Desktop>16</OnIdiom.Desktop>
</OnIdiom>
</Label.FontSize>
<Label.GestureRecognizers>
<TapGestureRecognizer
Tapped="LoadChapter"
CommandParameter="{Binding .}"
NumberOfTapsRequired="1">
</TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
//expander child tapping gesture
public void LoadChapter(object sender, EventArgs args)
{
var view = (View)sender;
var model = view.BindingContext as ContentList;
Debug.WriteLine("title:>>" + model.title);
}