Home > Mobile >  Why does my IsVisible Binding Not Work with a StackLayout ? Xamarin iOS
Why does my IsVisible Binding Not Work with a StackLayout ? Xamarin iOS

Time:10-16

I have the below XAML structure using a collection view which is using a list called 'users' as its ItemSource. I have a bound property which controls if the items are visible or not :

 <StackLayout Orientation="Horizontal">
 <Frame IsVisible="{Binding isVisible}" HasShadow="True" BackgroundColor="White" Padding="0">

The issue is that unless I remove the StackLayout around the Frame then the IsVisible binding doesn't work. Does anyone know why the binding works without the StackLayout, but not with ?

<CollectionView Grid.Row="1" x:Name="users" IsGrouped="True" SelectionMode="Single">
            <CollectionView.GroupHeaderTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal" MinimumHeightRequest="200" BackgroundColor="{Binding tint_colour}">
                        <Image Source="{Binding school_image}" WidthRequest="120" HeightRequest="100"/>
                        <Label Text="{Binding organisation_title}"                      
                                    TextColor="{Binding font_colour}"
                                    FontSize="Large"
                                    FontAttributes="Bold"
                                    VerticalTextAlignment="Center"></Label>
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="HeaderTapped" CommandParameter="{Binding organisation_title}"></TapGestureRecognizer>
                        </StackLayout.GestureRecognizers>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.GroupHeaderTemplate>
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal">
                        <Frame IsVisible="{Binding isVisible}" HasShadow="True" BackgroundColor="White" Padding="0">
                            <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                                <behaviors:Expander x:Name="MainExpander" CollapseAnimationLength="500" IsExpanded="False" IsVisible="True" >
                                    <behaviors:Expander.Header>
                                        <Grid HorizontalOptions="FillAndExpand">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="100"/>
                                                <ColumnDefinition Width="10"/>
                                            </Grid.ColumnDefinitions>
                                            <Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Center" Margin="20" Padding="0" BackgroundColor="Maroon">
                                                <Label Text="{Binding student_initial}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                                            </Frame>
                                            <StackLayout Grid.Column="2" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="20">
                                                <Label IsVisible="{Binding isVisible}" x:Name="StudentName" Text="{Binding student_fullname}"></Label>
                                                <Label x:Name="StudentID" IsVisible="false" Text="{Binding student_unique_id}"></Label>
                                            </StackLayout>
                                        </Grid>
                                    </behaviors:Expander.Header>
                                    <Grid RowSpacing="0" HorizontalOptions="FillAndExpand" HeightRequest="240" VerticalOptions="FillAndExpand">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <Button Grid.Row="0" Text="Messages" Clicked="Button_Clicked"></Button>
                                        <Button x:Name="btnTopUp" Grid.Row="1" Text="Quick Topup" Clicked="Button_Clicked" IsVisible="{Binding topup_product_id, Converter={StaticResource IsNotNullOrEmptyConverter}}"></Button>
                                        <Button Grid.Row="2" Text="Payments" Clicked="Button_Clicked"></Button>
                                    </Grid>
                                    <!-- TODO: Look at adding a balance for childrens topups? -->
                                </behaviors:Expander>
                            </Grid>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

CodePudding user response:

I did a test about it and it works fine, here are xaml and codebehind:

xmal:

<StackLayout>
        <CollectionView x:Name="mycol">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout >
                        <Frame BackgroundColor="Red" IsVisible="{Binding isvisible}">
                         <Label Text="{Binding Name}"/>
                            </Frame>
                     </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

codebehind:

public partial class CollectionTest : ContentPage
{
    ObservableCollection<People> peoples = new ObservableCollection<People> {
    new People{ Name="Adam",isvisible=true},
    new People{ Name="Bob",isvisible=true},
    new People {Name="Adam2",isvisible=false },
    new People{ Name="Bob2",isvisible=true} };
    public CollectionTest()
    {
        InitializeComponent();
        mycol.ItemsSource = peoples;
    }

result:

enter image description here

You could check the value of isvisible or check if the bind is set correctly.

  • Related