I'm having problem with not being able to stack two labels in a StackLayout and fit the content without a margin.
Expected result:
Current output:
I have tried and set the VerticalOptions, Margin and Padding properties but it still contains the margin (the red background) as well as the second content is not touching the "ceiling" of it's StackLayout parent.
Current code:
<ViewCell>
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="summary.png"/>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="Start" BackgroundColor="Red" Margin="0" Padding="0">
<StackLayout BindingContext="{Binding Date}" VerticalOptions="Start" BackgroundColor="Beige" Margin="0" Padding="0">
<Label Text="{Binding Text}" TextColor="{Binding Color}" VerticalOptions="Start"/>
</StackLayout>
<StackLayout BindingContext="{Binding Result}" VerticalOptions="Start" BackgroundColor="Blue" Margin="0" Padding="0">
<Label Text="{Binding Text}" TextColor="{Binding Color}" FontSize="{Binding FontSize}" VerticalOptions="Start"/>
</StackLayout>
</StackLayout>
</StackLayout>
</ViewCell>
Related
I need to display a list with about 30 to 40 items that the user has to choose from, and I don't wont to use a combobox, so a Listview seems the way to go.
However, once I put a listview on the page, the listview grows so much in height that it goes off the screen, how can I prevent that ?
I need something like this
<gttCompound:PageBase xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:gttCompound="clr-namespace:gttCompound.Pages"
x:Class="gttCompound.Pages.PageDamageSelectFromList">
<gttCompound:PageBase.ChildStackLayoutContent>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" Margin="5, 5">
<StackLayout VerticalOptions="Start" Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="SELECT THE DAMAGE LOCATION" FontAttributes="Bold" FontSize="{StaticResource FontSizeLabelSmall}" TextColor="{StaticResource TextColor}" ></Label>
</StackLayout>
<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
<ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
<!-- ListView Stuff -->
</ListView>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Button x:Name="ButtonDamageBack" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="Start" TextTransform="Uppercase" Text="{Binding Back}" BackgroundColor="{StaticResource ElementBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
<Button x:Name="ButtonDamageNext" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextTransform="Uppercase" IsEnabled="False" Text="{Binding Next}" BackgroundColor="{StaticResource ElementDisabledBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
</StackLayout>
</StackLayout>
</gttCompound:PageBase.ChildStackLayoutContent>
I gave some elements a noticable background color so I can see how much space they take
The listview takes way to much space.
Might it be because the page is an inherited page ?
The base page looks like this
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="gttCompound.Pages.PageBase"
xmlns:helpers="clr-namespace:gttCompound.Pages.Helpers">
<ContentPage.Resources>
<ResourceDictionary>
<helpers:StringNewLineConverter x:Key="StringNewLineConverter"/>
<helpers:StringToTitleCaseConverter x:Key="StringToTitleCaseConverter"/>
<helpers:StringSubstringConverter x:Key="StringSubstringConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<!-- All the stuff about the AbsoluteLayout is to get a WaitCursor that can show in the center of the screen, see this url
https://stackoverflow.com/questions/48295792/xamarin-forms-how-to-fix-activity-indicator-in-centre-of-screen-in-scrollview
-->
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout>
<StackLayout x:Name="TopStackLayout" VerticalOptions="Start" BackgroundColor="{StaticResource HeaderColor}" Orientation="Horizontal">
<Frame VerticalOptions="Center" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent" WidthRequest="40">
<Button x:Name="ButtonBack" VerticalOptions="Start" Text="" Image="Back.png" BackgroundColor="{StaticResource HeaderColor}" TextColor="{StaticResource TextColor}" FontSize="8" HeightRequest="14" />
</Frame>
<Frame VerticalOptions="CenterAndExpand" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent">
<Label Text="{Binding AppName}" HorizontalOptions="Start" HorizontalTextAlignment="Center" TextColor="White" FontSize="{StaticResource FontSizeLabelBig}" Padding="0" x:Name="Page_Title" />
</Frame>
</StackLayout>
<StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="0,-6">
</StackLayout>
<StackLayout x:Name="BottomStackLayout" VerticalOptions="End" Orientation="Horizontal" BackgroundColor="{StaticResource HeaderColor}">
<Label x:Name="LabelUser" Text="" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Start" IsVisible= "True" />
<Label x:Name="LabelVersion" Text="" HorizontalOptions="CenterAndExpand" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Center" IsVisible= "True" />
<Label Text="{Binding CopyRight}" HorizontalOptions="EndAndExpand" BackgroundColor="{StaticResource HeaderColor}" HorizontalTextAlignment="End" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" />
</StackLayout>
</StackLayout>
</ScrollView>
<AbsoluteLayout x:Name="LayoutWaitCursor" BackgroundColor="#22000000" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" AbsoluteLayout.LayoutFlags="All" IsVisible="false">
<ActivityIndicator IsVisible="true" IsRunning="True" Color="{StaticResource TextColor}" AbsoluteLayout.LayoutBounds="0.5,0.5,0.1,0.1" AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>
</AbsoluteLayout>
</ContentPage>
Here is how the form looks like at runtime
And without the listview it looks like this
I changed just this
<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
<!--
<ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
</ListView>
-->
</StackLayout>
What I want is that the listview is visible and scrollable, but the 2 buttons should always stay visible. The listview must only occupy the space between the label on top of the page and the 2 buttons on the bottom of the page.
How can I do that ?
1) REMOVE ScrollView.
2) <StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" .... Try different VerticalOptions. Try Center. Also try CenterAndExpand..
3) If still wrong, change the outer StackLayout to Grid, and use RowDefinitions="Auto,*,Auto", with the 3 sections marked Grid.Row="0" / "1" / "2".
ChildStackLayout is "1" (numbered from 0), so gets the * in RowDefinitions.
How can i put the indicatorview below and center of the image?
https://imgur.com/Wa3Ur48
I tried position and other stuff but i can't seem to move the indicatorview below the image.
<StackLayout Grid.Row="0" Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<!--<ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10"
Style="{StaticResource RetailHeaderImage}"
Source="{Binding ImageSource}">
</ffimageloading:CachedImage>-->
<CarouselView ItemsSource="{Binding ImageUrls}" IndicatorView="indicatorView" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10" HeightRequest="150" WidthRequest="150" >
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<ffimageloading:CachedImage
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
LoadingPlaceholder="loading.gif"
Aspect="AspectFill"
BackgroundColor="Black"
Source="{Binding}">
</ffimageloading:CachedImage>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="StartAndExpand"
VerticalOptions="End"/>
<Label Text="{Binding ReferenceSku.Name}" Style="{StaticResource RetailHeaderText}" HorizontalOptions="FillAndExpand" LineBreakMode="WordWrap"/>
</StackLayout>
Set the Orientation of the StackLayout to Vertical. And then set the IndicatorView in the center of the StackLayout.
Refer to the xaml below:
<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<!--<ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10"
Style="{StaticResource RetailHeaderImage}"
Source="{Binding ImageSource}">
</ffimageloading:CachedImage>-->
<CarouselView ItemsSource="{Binding ImageUrls}" IndicatorView="indicatorView" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10" HeightRequest="150" WidthRequest="150" >
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Image Source="{Binding image}"></Image>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"/>
<Label Text="Name" LineBreakMode="WordWrap"/>
</StackLayout>
Screen
On the picture above you can see where the ImageButton sometimes activates. When I spam clicking in the blue area the counter sometimes increases. I think there might be another Layer on top of the ImageButton but I dont know how to fix it. Below there is the XAML code. Hopefully somebody can help. Thanks!
<StackLayout>
<Label Text="Discover" TextColor="Black" FontSize="24" FontAttributes="Bold" Margin="15" />
<CarouselView ItemsSource="{Binding plants}" HeightRequest="300" PeekAreaInsets="100">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HeightRequest="280" WidthRequest="180" BackgroundColor="Wheat" HasShadow="True" Margin="10" Padding="0" HorizontalOptions="CenterAndExpand" CornerRadius="10" >
<Grid>
<StackLayout>
<ImageButton Source="{Binding imgsource}" VerticalOptions="FillAndExpand"
Aspect="AspectFill" Opacity="0.8" Clicked="ImageButton_Clicked"/>
</StackLayout>
<StackLayout Margin="0,10" >
<Image Source="https://icons-for-free.com/iconfiles/png/512/bookmark-131964752402712733.png" HeightRequest="35"
Aspect="AspectFit" HorizontalOptions="EndAndExpand" Margin="5,-15"/>
<Label Text="{Binding name_norm}" TextColor="Black" FontSize="16" FontAttributes="Bold"
Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" >
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15"
Aspect="AspectFit"/>
<Label Text="{Binding name_lat}" TextColor="Black" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Label x:Name="label" Text="0 ImageButton clicks"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
Here the C# Code:
namespace PlantBase
{
public partial class MainPage : ContentPage
{
int clickTotal;
public MainPage()
{
InitializeComponent();
}
private void ImageButton_Clicked(object sender, EventArgs e)
{
clickTotal += 1;
label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
}
}
}
Check VisualElement.InputTransparent Property.
false if the element and its children should receive input; true if neither the element nor its children should receive input and should, instead, pass inputs to the elements that are visually behind the current visual element. Default is false.
What you need is to set InputTransparent to true on the text stackLayout .
<StackLayout InputTransparent="True" Margin="0,10" VerticalOptions="EndAndExpand" BackgroundColor="SaddleBrown">
<Label Text="{Binding name_norm}" TextColor="White" FontSize="16" FontAttributes="Bold" Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" BackgroundColor="Aqua">
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15" Aspect="AspectFit" />
<Label Text="{Binding name_lat}" TextColor="White" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
Okay I found the Problem. It was that before I put the red Flag on the Top and the text at the bottom in one Stacklayout which expanded from top to bottom. Now that i put them in seperate StackLayouts it works and the ImageButton is free.
Pictures before/after.
old StackLayout
new Stacklayout
The new XAML is:
<CarouselView ItemsSource="{Binding plants}" HeightRequest="300" PeekAreaInsets="100">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HeightRequest="280" WidthRequest="180" BackgroundColor="Wheat" HasShadow="True" Margin="10" Padding="0" HorizontalOptions="CenterAndExpand" CornerRadius="10" >
<Grid>
<StackLayout>
<ImageButton Source="{Binding imgsource}" VerticalOptions="FillAndExpand"
Aspect="AspectFill" Opacity="0.9" Clicked="ImageButton_Clicked" />
</StackLayout>
<StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand" BackgroundColor="Aqua">
<ImageButton Source="https://icons-for-free.com/iconfiles/png/512/bookmark-131964752402712733.png" HeightRequest="35"
Aspect="AspectFit" HorizontalOptions="EndAndExpand" Margin="5,0" BackgroundColor="Transparent" Clicked="ImageButton_Clicked_1" />
</StackLayout>
<StackLayout Margin="0,10" VerticalOptions="EndAndExpand" BackgroundColor="SaddleBrown">
<Label Text="{Binding name_norm}" TextColor="White" FontSize="16" FontAttributes="Bold"
Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" BackgroundColor="Aqua" >
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15"
Aspect="AspectFit" />
<Label Text="{Binding name_lat}" TextColor="White" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
New Question now. Since at the bottom there is the Text StackLayout, where the Text is I cant press the ImageButton. How can I put the ImageButton as top "layer" so I can also press it while pressing on the text.
This Is My Checkbox Page ,I have separated(Dictionaries,collection,reffrence) using grid ,and each part have a listview ,I want to remove the unnecessary space show in dictionaries section ,Also want to auto increase the size .I have use List View to display checkbox and all section is maintain thought grid
This Is My Checkbox Page ,I have separated by this list using grid ,I want to remove the unnecessary space show in dictionaries section ,Also want to auto increase the size .I have use List View to display checkbox and all section is maintain thought grid
This Below is my code ,
<StackLayout Padding="10" Grid.Column="0" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Vertical">
<Label Margin="-15,0,0,0" HorizontalOptions="StartAndExpand" Text="{x:Static resources:AppResources.Dictionaries}" Style="{StaticResource MenueLable}" ></Label>
<ListView BackgroundColor="White" ItemsSource="{Binding DictionariesFilter}" VerticalOptions="FillAndExpand" HasUnevenRows="True" SeparatorVisibility="None" RowHeight="-1">
<ListView.ItemTemplate >
<DataTemplate >
<ViewCell Tapped="Handle_Tapped" >
<StackLayout Orientation="Horizontal">
<input:CheckBox Style="{StaticResource CheckBox}" IsChecked="{Binding IsChecked}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand, Source={x:Reference Name=entriesView}}"/>
<Label Text="{Binding DicName}" VerticalTextAlignment="Center" ></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="Load More" IsVisible="False" TextColor="#22B473" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Start"></Button>
<Line Background="#F0F0F0" HeightRequest="2" ></Line>
</StackLayout>
<StackLayout Grid.Row="1" VerticalOptions="FillAndExpand" Orientation="Vertical">
<Label Margin="-25,0,0,0" Text="{x:Static resources:AppResources.Collection}" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Style="{StaticResource MenueLable}"></Label>
<ListView ItemsSource="{Binding CollectionsFilter}" HasUnevenRows="True" BackgroundColor="White" SeparatorVisibility="None" RowHeight="-1" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="Handle_Tapped">
<StackLayout Orientation="Horizontal" >
<input:CheckBox Style="{StaticResource CheckBox}" Type="Check"
CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<Label Text="{Binding DicName}" VerticalTextAlignment="Center" ></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Line Background="#F0F0F0" HeightRequest="2"></Line>
</StackLayout>
<StackLayout Grid.Row="2" VerticalOptions="FillAndExpand" Orientation="Vertical">
<Label Margin="-20,0,0,0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Text="{x:Static resources:AppResources.References}" Style="{StaticResource MenueLable}"></Label>
<ListView HasUnevenRows="True" BackgroundColor="White" ItemsSource="{Binding RefrencesFilter}" SeparatorVisibility="None" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" >
<input:CheckBox Style="{StaticResource CheckBox}" Type="Check"
CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<Label Text="{Binding DicName}" VerticalTextAlignment="Center" ></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Line Background="#F0F0F0" HeightRequest="2"></Line>
</StackLayout>
<ScrollView Grid.Row="3">
<StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Orientation="Vertical">
<Label Margin="0,0,0,0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Text="{x:Static resources:AppResources.CategorisedBy}" Style="{StaticResource MenueLable}"></Label>
<input:CheckBox Margin="-10,0,0,0" IsChecked="{Binding IsSelected}" Style="{StaticResource CheckBox}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox1}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<input:CheckBox Margin="-10,0,0,0" Style="{StaticResource CheckBox}" IsChecked="{Binding IsSelected}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox2}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<input:CheckBox Margin="-10,0,0,0" IsChecked="{Binding IsSelected}" Style="{StaticResource CheckBox}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox3}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<input:CheckBox Margin="-10,0,0,0" IsChecked="{Binding IsSelected}" Style="{StaticResource CheckBox}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox4}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
</StackLayout>
</ScrollView>
</Grid>
</StackLayout>
I have a Stacklayout that contains another Stacklayout and an Image. In order to have rounded corners for both children of the top Stacklayout, I added Frame for each child. Now, only the second child (Image) appear no matter how I change the visibility of the two children.
<StackLayout HeightRequest="135" WidthRequest="100" Margin="5,5" Grid.Row="0" Spacing="0" HorizontalOptions="Start" VerticalOptions="Start">
<Frame IsVisible="false" CornerRadius="5" IsClippedToBounds="True" Padding="0" HasShadow="False" x:Name="InitialsFrame">
<StackLayout IsVisible="false" HeightRequest="100" WidthRequest="100" BackgroundColor="{Binding Color}">
<Label FontSize="60" Text="{Binding Initials}" TextColor="White" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" MaxLines="1" x:Name="InitialsLabel">
</Label>
</StackLayout>
</Frame>
<Frame IsVisible="true" CornerRadius="5" IsClippedToBounds="True" Padding="0" x:Name="ImageFrame">
<Image IsVisible="true" Source="{Binding Image}" HeightRequest="100" WidthRequest="100" x:Name="IconImage" />
</Frame>
</StackLayout>
Without the two Frames, I could choose which child to appear by setting IsVisible to True. But now, setting IsVisible does not work any more. Is there another way to conditionally choose which child to appear?