Comments (4)
karen-yu-ysk
commented on June 16, 2024
Sample code like this:
<expandable:ExpandableView HorizontalOptions="FillAndExpand"
TouchHandlerView="{x:Reference ExpandableListArrow}"
ExpandAnimationLength="0"
CollapseAnimationLength="0">
<expandable:ExpandableView.PrimaryView>
<StackLayout Orientation="Horizontal"
Spacing="0"
HorizontalOptions="FillAndExpand">
<Label Text="Expandable View"
FontAttributes="Bold"/>
<Image x:Name="ExpandableListArrow"
Source="icon_arrow_down"
HorizontalOptions="EndAndExpand"
VerticalOptions="Start" />
</StackLayout>
</expandable:ExpandableView.PrimaryView>
<expandable:ExpandableView.SecondaryViewTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical"
Spacing="0"
HorizontalOptions="FillAndExpand">
<Label Text="View Name"
HorizontalOptions="Start"/>
<StackLayout Orientation="Vertical"
Spacing="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BindableLayout.ItemsSource="{Binding SampleList}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid HorizontalOptions="FillAndExpand"
ColumnSpacing="18"
RowSpacing="25"
Margin="0,0,0,35">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Spacing="0"
Grid.Row="0"
Grid.ColumnSpan="4"
Orientation="Vertical"
HorizontalOptions="FillAndExpand">
</StackLayout>
<Label Grid.Row="1"
Grid.ColumnSpan="2"
Text="Label 1"/>
<Label Grid.Row="1"
Grid.Column="2"
Text="Label 2"/>
<Label Grid.Row="1"
Grid.Column="3"
Text="Label 3"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<Button Text="Button"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</DataTemplate>
</expandable:ExpandableView.SecondaryViewTemplate>.
</expandable:ExpandableView>
from expandableview.
AndreiMisiukevich
commented on June 16, 2024
Hi @karen-yu-ysk have your already tried Expander from Xamarin.Forms? We merged this control there
from expandableview.
karen-yu-ysk
commented on June 16, 2024
@AndreiMisiukevich I have tried Expander from Xamain.Forms. But if showing the empty view in
the list, will throw NaN is not valid for height in IOS.
<Expander HorizontalOptions="FillAndExpand"
ExpandAnimationLength="0"
CollapseAnimationLength="0">
<Expander.Header>
<StackLayout Orientation="Horizontal"
Spacing="0"
HorizontalOptions="FillAndExpand">
<Label Text="Expandable View"
FontAttributes="Bold"/>
<Image x:Name="ExpandableListArrow"
Source="icon_arrow_down"
HorizontalOptions="EndAndExpand"
VerticalOptions="Start">
<Image.Triggers>
<DataTrigger TargetType="Image"
Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="Source"
Value="icon_arrow_up" />
</DataTrigger>
</Image.Triggers>
</Image>
</StackLayout>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical"
Spacing="0"
HorizontalOptions="FillAndExpand">
<Label Text="View Name"
HorizontalOptions="Start"/>
<StackLayout Orientation="Vertical"
Spacing="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BindableLayout.ItemsSource="{Binding SampleList}">
<BindableLayout.EmptyView>
<Label Text="Empty View"
Margin="0,24,0,0"/>
</BindableLayout.EmptyView>
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid HorizontalOptions="FillAndExpand"
ColumnSpacing="18"
RowSpacing="25"
Margin="0,0,0,35">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Spacing="0"
Grid.Row="0"
Grid.ColumnSpan="4"
Orientation="Vertical"
HorizontalOptions="FillAndExpand">
</StackLayout>
<Label Grid.Row="1"
Grid.ColumnSpan="2"
Text="Label 1"/>
<Label Grid.Row="1"
Grid.Column="2"
Text="Label 2"/>
<Label Grid.Row="1"
Grid.Column="3"
Text="Label 3"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<Button Text="Button"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
from expandableview.
AndreiMisiukevich
commented on June 16, 2024
@AndreiMisiukevich I have tried Expander from Xamain.Forms. But if showing the empty view in
the list, will throw NaN is not valid for height in IOS.<Expander.Header> <StackLayout Orientation="Horizontal" Spacing="0" HorizontalOptions="FillAndExpand"> <Label Text="Expandable View" FontAttributes="Bold"/> <Image x:Name="ExpandableListArrow" Source="icon_arrow_down" HorizontalOptions="EndAndExpand" VerticalOptions="Start"> <Image.Triggers> <DataTrigger TargetType="Image" Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}" Value="True"> <Setter Property="Source" Value="icon_arrow_up" /> </DataTrigger> </Image.Triggers> </Image> </StackLayout> </Expander.Header> <Expander.ContentTemplate> <DataTemplate> <StackLayout Orientation="Vertical" Spacing="0" HorizontalOptions="FillAndExpand"> <Label Text="View Name" HorizontalOptions="Start"/> <StackLayout Orientation="Vertical" Spacing="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BindableLayout.ItemsSource="{Binding SampleList}"> <BindableLayout.EmptyView> <Label Text="Empty View" Margin="0,24,0,0"/> </BindableLayout.EmptyView> <BindableLayout.ItemTemplate> <DataTemplate> <Grid HorizontalOptions="FillAndExpand" ColumnSpacing="18" RowSpacing="25" Margin="0,0,0,35"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <StackLayout Spacing="0" Grid.Row="0" Grid.ColumnSpan="4" Orientation="Vertical" HorizontalOptions="FillAndExpand"> </StackLayout> <Label Grid.Row="1" Grid.ColumnSpan="2" Text="Label 1"/> <Label Grid.Row="1" Grid.Column="2" Text="Label 2"/> <Label Grid.Row="1" Grid.Column="3" Text="Label 3"/> </Grid> </DataTemplate> </BindableLayout.ItemTemplate> </StackLayout> <Button Text="Button" VerticalOptions="EndAndExpand"/> </StackLayout> </DataTemplate> </Expander.ContentTemplate>.
Do you experience the same exceptions if you use Expander with StackLayout + ScrollView? (Probably there are some troubles with ListView+Expander)
from expandableview.
Related Issues (20)
- Please sample of usage with Binding from XAML HOT 8
- Next level of view HOT 6
- Select Item in View Programmatically HOT 3
- Secondary view doesn't resize when (eg) rotating the device HOT 11
- [Feature Request]: Scroll To Secondary View If Out Of Bounds HOT 9
- ScrollView Not showing in Sample Code HOT 4
- Does ExpandableView Support BindingContext As Collection. HOT 16
- TouchHandlerView Property and CommandProperty HOT 8
- Collapsing and expanding is leaving empty space where SecondaryView was HOT 2
- Last item in list view - expanding not immediately allowing scroll to reveal secondary-view HOT 11
- Random Cells Do Not Expand/Collapse HOT 1
- Expand an item one at a time HOT 2
- Can you add SecondaryView for xaml? HOT 1
- Cell is overlapping on each other. HOT 1
- x:Name in ExpandableView.SecondaryViewTemplate HOT 2
- Make Expander control HOT 2
- gif not shown HOT 2
- [Enhancement] Add OnExpanding and OnCollapsing events. HOT 3
- Second ExpanderView PrimaryView height issue when First Status changes to Expanded iOS - CollectionView HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from expandableview.