나는 이것에 대해 너무 많은 시간을 할애합니다 ... 누군가이 문제를 해결하는 데 도움을 줄 수 있습니까?
내 목표는 카드(프레임) 목록을 만드는 것입니다. 각 카드에는 두 개의 레이블과 (짧은) 항목 목록이 있습니다.
좀 더 읽기 쉽게 만들기 위해 프레임과 해당 콘텐츠가 포함된 사용자 지정 구성 요소를 만들기로 결정했습니다.
각 프레임에 레이블만 있는 프레임 목록을 만들면 모든 것이 좋아 보입니다(첫 번째 이미지). 프레임의 높이는 필요한 높이일 뿐 더 이상은 아닙니다.
하지만 ... 프레임에 두 번째 수준의 목록 보기를 추가하면 모든 목록이 항목(두 번째 이미지) 뒤에 빈 높이를 많이 낭비하게 됩니다!!! 그리고 난 이 낭비된 공간을 없앨 수 없어. . . . . . .
사용자 정의 구성 요소의 코드만 게시합니다(목록 보기의 두 번째 수준 포함).
<ContentView.Content>
<Frame BorderColor="Gray"
CornerRadius="5"
Padding="8">
<StackLayout>
<Label Text="{Binding Data.TaskHeading, Source={x:Reference this}}"/>
<Label Text="{Binding Data.PeopleHeading, Source={x:Reference this}}"/>
<BoxView Color="Gray"
HeightRequest="2"
HorizontalOptions="Fill" />
<ListView ItemsSource="{Binding Data.Tasks, Source={x:Reference this}}" BackgroundColor="Pink" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding mark}"/>
<Label Text="{Binding description}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Frame>
</ContentView.Content>
모든 곳에 VerticalAlign="Start"를 추가하려고 시도하지만 도움이 되지 않습니다.
HasUnevenRows="True" 사용은 이 문제에 영향을 미치지 않습니다.
아무도 나를 도와줄 수 있습니까?
BindableLayouts를 사용하여 해결할 수 있습니다 .
다음 코드는 필요한 것과 매우 유사합니다. 기본 모델을 작성했으며 INotifyPropertyChanged
필요하면 언제든지 인터페이스를 구현할 수 있습니다 .
모델/뷰모델:
public class CardModel
{
public string TaskHeading { get; set; }
public string PeopleHeading { get; set; }
public CardItemModel[] Items { get; set; }
public class CardItemModel
{
public string Mark { get; set; }
public string Description { get; set; }
}
}
public class CardsPageViewModel
{
public CardModel[] Tasks { get; set; }
public CardsPageViewModel()
{
Tasks = Enumerable.Range(1, 10).Select(i =>
new CardModel
{
TaskHeading = $"TaskHeading {i}",
PeopleHeading = $"People Heading {i}",
Items = Enumerable.Range(1, 4).Select(j =>
new CardModel.CardItemModel
{
Mark = $"Mark {j}",
Description = $"Description {j}"
}).ToArray()
}).ToArray();
}
}
XAML:
...
<ScrollView>
<StackLayout BindableLayout.ItemsSource="{Binding Tasks, Mode=OneWay}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame>
<StackLayout>
<Label Text="{Binding TaskHeading, Mode=OneWay}" FontAttributes="Bold"/>
<Label Text="{Binding PeopleHeading, Mode=OneWay}"/>
<StackLayout BindableLayout.ItemsSource="{Binding Items, Mode=OneWay}" BackgroundColor="LightPink">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Mark, Mode=OneWay}"/>
<Label Text="{Binding Description, Mode=OneWay}"/>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
...
산출:
편집 : ViewBox 구분 기호와 Frame CornerRadius 및 BorderColor를 추가하는 것을 잊었습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다