I'm using a Telerik RadPopup composed with an entry and checkbox's.
When I open the popup, the focus is directly is the entry. But I dont want a focus in any component.
It is possible using this type of popup ?
There is the code
<telerikPrimitives:RadPopup.Popup>
<telerikPrimitives:RadPopup Placement="Center" IsModal="False" OutsideBackgroundColor="#6F000000" IsOpen="{Binding WantSendEmail}">
<telerikPrimitives:RadBorder CornerRadius="8" BackgroundColor="{StaticResource Key=LightBackgroundColor}">
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0" Margin="0" WidthRequest="250">
<StackLayout Orientation="Vertical" >
<StackLayout BackgroundColor="{StaticResource Key=MainButtonPrimaryColor}"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="Envoi par Email" HorizontalOptions="CenterAndExpand" FontSize="{Binding FontSizeXSmall}"
Padding="10"
TextColor="White" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10,10,0"
HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand">
<CheckBox IsChecked="{Binding SaisieLibre, Converter={StaticResource cnvInverseBoolConverter}}" Color="{StaticResource Key=MainButtonPrimaryColor}"/>
<ContentView Focused="ContentView_Focused" Content="{Binding EntrySearchTiers}" Padding="10,10,10,0"
IsEnabled="{Binding SaisieLibre, Converter={StaticResource cnvInverseBoolConverter}}"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10,10,0"
HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand">
<CheckBox IsChecked="{Binding SaisieLibre}" Color="{StaticResource Key=MainButtonPrimaryColor}"/>
<Label Text="Saisie Libre" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10,10,0"
HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"
IsEnabled="{Binding CurrentUserHasContact}">
<CheckBox IsChecked="{Binding CCEnable}" Color="{StaticResource Key=MainButtonPrimaryColor}"/>
<Label Text="Recevoir une copie" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Padding="10,0,10,10">
<Button Style="{StaticResource Key=BtnFlex}" Text="Envoyer"
WidthRequest="100" HeightRequest="30"
Command="{Binding SendMailCommand}"/>
</StackLayout>
</StackLayout>
</Frame>
</telerikPrimitives:RadBorder>
</telerikPrimitives:RadPopup>
</telerikPrimitives:RadPopup.Popup>
And the contentView :
EntrySearchTiers = new SearchableEntry()
{
Style = (Xamarin.Forms.Style)Application.Current.Resources["MainEntryStyle"],
FontSize = FontSizeMedium,
Placeholder = "Liste des tiers"
};
EntrySearchTiers.Behaviors.Add(new Prism.Behaviors.EventToCommandBehavior
{
//EventName = "Completed", --> Jamais triggered
EventName = "TextChanged",
Command = TiersSelectedCommand
});
EntrySearchTiers.SetBinding(Entry.TextProperty, new Binding("CodeTiersSelected", BindingMode.TwoWay, null));
Base.Views.Popups.ChoicesPopup popup = new Base.Views.Popups.ChoicesPopup(_serviceTiers, null, Guid.Empty, EntrySearchTiers, "code tiers :", this, serviceHistoChoice: _serviceHistoChoice, groupChoice: Enums.enumGroupChoice.Tiers);
await popup.ActivateSearchEntryBehavior();
enter code here
Related
I have a SwipeCardView and I want to get the id of the user that I've just swiped.
<swipeCardView:SwipeCardView
x:Name="SwipeView1" ItemsSource="{Binding Profiles}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Padding="10" >
<swipeCardView:SwipeCardView.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Frame CornerRadius="10"
Padding="8"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<AbsoluteLayout>
<AbsoluteLayout.GestureRecognizers>
<SwipeGestureRecognizer Direction="Left" Command="{Binding LeftCommand}"
CommandParameter="{Binding nome}" />
</AbsoluteLayout.GestureRecognizers>
<Image Source="{Binding foto_perfil}"
Aspect="AspectFill"
AbsoluteLayout.LayoutBounds=".5,0.5,1,1"
AbsoluteLayout.LayoutFlags="All" />
<Label FontSize="Large"
WidthRequest="30"
FontAttributes="Bold"
TextColor="White"
BackgroundColor="Black"
AbsoluteLayout.LayoutBounds="0.1,0.95,250,30"
AbsoluteLayout.LayoutFlags="PositionProportional">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding nome}" />
<Span Text=", " />
<Span Text="{Binding data_nasc}" />
</FormattedString>
</Label.FormattedText>
</Label>
</AbsoluteLayout>
</Frame>
</StackLayout>
</DataTemplate>
</swipeCardView:SwipeCardView.ItemTemplate>
</swipeCardView:SwipeCardView>
In the C# I created a command but it never enter i the void:
public Command LeftCommand => new Command<string>(LeftSwipe);
void LeftSwipe(string parameter)
{
var variable = parameter; //= breed_Name
DisplayAlert("", variable.ToString(), "ok");
}
I don´t know what I've done wrong because it still swipes
If your LeftCommand is in the ViewModel of your page, you can specify a source just as Jason said.
You can refer to the folloing code:
<swipeCardView:SwipeCardView x:Name="mCardView"
ItemsSource="{Binding CardItems}"
VerticalOptions="FillAndExpand">
<swipeCardView:SwipeCardView.ItemTemplate>
<DataTemplate>
<StackLayout >
<Label Text="{Binding Name}" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Beige" />
<StackLayout.GestureRecognizers>
<SwipeGestureRecognizer Direction="Left"
Command="{Binding Path=BindingContext.LeftCommand, Source={x:Reference mCardView}}"
CommandParameter="{Binding .}" >
</SwipeGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</swipeCardView:SwipeCardView.ItemTemplate>
</swipeCardView:SwipeCardView>
Note:
1.mCardView is the x:Name="mCardView" of your SwipeCardView;
2.In your viewModel, you can get the Binded Item as follows:
public Command LeftCommand => new Command(LeftSwipe);
void LeftSwipe(Object parameter)
{
//You can change `Profile ` to your Item Model
Profile variable = parameter as Profile;
System.Diagnostics.Debug.WriteLine("-----------> " + variable.Name +"<---> Id = "+ variable.ProfileId);
}
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>
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;
}
My ContentPage have a Grid inside a ListView that contains a column (x:Name="stlNomeMiniatura") with a label and an image, as below:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="InventarioBensCelular.MainPage"
BackgroundColor="White">
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="Start" HeightRequest="130" Background="#003399">
<StackLayout Orientation="Horizontal" HorizontalOptions="Start" VerticalOptions="Start" HeightRequest="40" Margin="7,10">
<StackLayout Orientation="Horizontal">
<Image Source="Icone.png" Aspect="Fill" HeightRequest="40" WidthRequest="48" VerticalOptions="Center"
HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="300" HeightRequest="40">
<StackLayout Orientation="Vertical">
<Label x:Name="lblTitulo" Text="Inventário de Bens" FontSize="17" FontAttributes="Bold"
VerticalOptions="Start" TextColor="White" Padding="0,-2,0,0"/>
<Label x:Name="lblSubtitulo" Text="Transmissão de Foto" FontSize="17" FontAttributes="Bold"
VerticalOptions="Start" TextColor="White" Padding="0,-7,0,0"/>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" VerticalOptions="Center" HeightRequest="40">
<ImageButton Source="ParametrosVerde.png" HorizontalOptions="Center" VerticalOptions="Center"
HeightRequest="32" WidthRequest="32" Clicked="Parametro_Clicou"/>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="Start">
<StackLayout WidthRequest="160" Margin="7,0">
<Frame x:Name="TiraFoto" CornerRadius="10" BorderColor="DarkGreen" HorizontalOptions="StartAndExpand"
Padding="0" HeightRequest="32" VerticalOptions="Start" BackgroundColor="#E0FFE0" WidthRequest="160">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TiraFoto_Clicou" />
</Frame.GestureRecognizers>
<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" Padding="10,0,0,0">
<Image Source="Camera.png" Aspect="Fill" HeightRequest="26" WidthRequest="24" VerticalOptions="Center" HorizontalOptions="Start"/>
<Label Text="Tirar Uma Foto" FontSize="16" FontAttributes="Bold" VerticalTextAlignment="Center" HorizontalOptions="Start"
TextColor="DarkGreen"/>
</StackLayout>
</Frame>
</StackLayout>
<StackLayout WidthRequest="160">
<Frame x:Name="Sair" CornerRadius="10" BorderColor="Red"
Padding="0" HeightRequest="32" VerticalOptions="Start" BackgroundColor="#FFE8E8" WidthRequest="160">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Sair_Clicou" />
</Frame.GestureRecognizers>
<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" Padding="10,0,0,0">
<Image Source="Sair.png" Aspect="Fill" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" HorizontalOptions="Start"
IsAnimationPlaying="True"/>
<Label Text="Sair Programa" FontSize="16" FontAttributes="Bold" VerticalTextAlignment="Center" HorizontalOptions="Start"
TextColor="Red"/>
</StackLayout>
</Frame>
</StackLayout>
<StackLayout>
</StackLayout>
<StackLayout Margin="0,-2">
<Frame x:Name="WiFi" CornerRadius="10" BorderColor="#003399"
Padding="0" HeightRequest="35" VerticalOptions="Center" BackgroundColor="White" WidthRequest="35">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="WiFi_Clicou" />
</Frame.GestureRecognizers>
<Image x:Name="imgWiFiStatus" Source="WifiVermelho.gif" Aspect="Fill" HeightRequest="24" WidthRequest="24"
VerticalOptions="Center" HorizontalOptions="Center"/>
</Frame>
</StackLayout>
</StackLayout>
</StackLayout>
<Frame BackgroundColor="Transparent" HeightRequest="25" Padding="0" VerticalOptions="Center" Margin="10,0">
<Label Text="Arquivos a Transmitir:" FontSize="15" FontAttributes="Bold"
VerticalOptions="Start" TextColor="#003399"/>
</Frame>
<StackLayout Margin="10,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ListView x:Name="ltvArquivoLista" SeparatorVisibility="None" SelectionMode="None" HasUnevenRows="False" IsPullToRefreshEnabled = "True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="169"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="347"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout x:Name="stlNomeMiniatura" Grid.Row="0" Grid.Column="0" Orientation="Vertical"
HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Label Text="{Binding Nome, Mode=OneWay}" FontSize="15"
VerticalOptions="Start" TextColor="#003399"/>
<Image Source="{Binding Miniatura, Mode=OneWay}" Aspect="AspectFit"
VerticalOptions="Start"
HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical"
HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Image x:Name="cmdExcluirFoto" Source="{Binding BotaoExcluirImagem, Mode=OneWay}" Aspect="AspectFill"
HeightRequest="32" WidthRequest="32" VerticalOptions="Start" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Foto_Excluir_Clicou"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
In the .CS file I have the following piece of code that shows how the ListView ItemsSource is set with the ObservableCollection "Arquivo":
public ObservableCollection<Arquivo> Arquivos = new ObservableCollection<Arquivo>();
private List<string> ArquivosATransmitir = null;
private DateTime TestaConexaoIntervaloDtInicio = Convert.ToDateTime("2000/01/01 00:00:00");
private DateTime TestaConexaoIntervaloDtFim = Convert.ToDateTime("2000/01/01 00:00:00");
public MainPage()
{
InitializeComponent();
DeviceInfo = new DeviceInfo.CDeviceInfo();
Rotinas.File_Found("Inventario.ini", DeviceInfo.Info.Application.DataFolder, false, #"/");
if (Rotinas.INIFileName == null)
{
Rotinas.INIFileName = DeviceInfo.Info.Application.DataFolder + #"/Inventario.ini";
Rotinas.INI_Write("[SISTEMA]", "Titulo", "Inventário de Bens");
Rotinas.INI_Write("[SISTEMA]", "Subtitulo", "Transmissão de Fotos");
Rotinas.INI_Write("[SERVIDOR]", "IP", "192.168.0.22");
Rotinas.INI_Write("[SERVIDOR]", "Porta", "1234");
}
TituloSistema = Rotinas.INI_Read("[SISTEMA]", "Titulo");
Subtitulo = Rotinas.INI_Read("[SISTEMA]", "Subtitulo");
ServidorIP = Rotinas.INI_Read("[SERVIDOR]", "IP");
if (ServidorIP != "")
{
string auxPorta = Rotinas.INI_Read("[SERVIDOR]", "Porta");
if (auxPorta != null)
{
ServidorPorta = auxPorta;
}
else
{
ServidorPorta = "1234";
}
} else
{
ServidorIP = null;
ServidorPorta = null;
}
this.lblTitulo.Text = TituloSistema;
this.lblSubtitulo.Text = Subtitulo;
ConexaoServidor = new Connection();
ConexaoServidor.FileTypeName = "Fotos";
DiretorioArquivosATransmitir = DeviceInfo.Info.Application.DataFolder + #"/ArquivosATransmitir";
if (!Directory.Exists(DiretorioArquivosATransmitir))
{
Directory.CreateDirectory(DiretorioArquivosATransmitir);
}
ArquivosATransmitir = Directory.GetFiles(DiretorioArquivosATransmitir, "*.*", SearchOption.AllDirectories)
.Where(file => new string[] { ".jpg" }.Contains(Path.GetExtension(file))).ToList();
if (ArquivosATransmitir.Count > 0)
{
for (int Ctr = 0; Ctr <= ArquivosATransmitir.Count - 1; Ctr++)
{
GridArquivo_Incluir(ArquivosATransmitir[Ctr]);
}
}
ltvArquivoLista.ItemsSource = Arquivos;
Testa_Conexao_Servidor();
}
I would like it to appear as below:
But, the GridView is shown with the rows height fixed with the images truncated, as below:
What am I doing wrong?
Thanks in advance, sorry for my poor English.
Marcelo Camarate
You can try to modify your code as follows:
1.change the value of property HasUnevenRows from False to True for your Listview (ltvArquivoLista)
HasUnevenRows="True"
2.change Height of RowDefinition from 169 to * or Auto;
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="347"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
</Grid.ColumnDefinitions>
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.
I'm working on a Xamarin Forms project where I need to have a drop down list like html drop down as in image.
I have taken a StackLayout for button and Listview (initially hidden) and when clicked on button will change the visibility to true. The list should open above other buttons but when the list get open, all other stackLayout moved below as in image.
I want the list view to be open above other views. The code for the screen is as below. Could any one help what changed do I need to make in the below code.
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> </Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 1" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 2" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 3" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
</StackLayout>
Edited:
This is my actual XAML
<StackLayout BackgroundColor="#FFFFFF" Padding="20,20,200,20" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout x:Name="PreferencesBodyLayout" Padding="10,10,10,10" Orientation="Vertical">
<StackLayout x:Name="LanguageLayout" Orientation="Horizontal" HeightRequest="50" HorizontalOptions="FillAndExpand" >
<Label Text="Change Language" Font="Large" TextColor="Black" HorizontalOptions="StartAndExpand" />
<RelativeLayout x:Name="LanguageSelectionRelativeLayout" HorizontalOptions="EndAndExpand">
<StackLayout Padding="2" Spacing="0" BackgroundColor="#EFEFEF" WidthRequest="150" >
<StackLayout x:Name="LanguageDropDown" Padding="0" Spacing="0" Orientation="Horizontal" BackgroundColor="White" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Label x:Name="SelectedLanguageLabel" StyleId="Settings_ChangeLanguage_Label" Margin="5" Text="{Binding SelectedLanguageLabelText}" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Font="Medium"/>
</StackLayout>
<StackLayout HorizontalOptions="End">
<Image Source="ge_arrow_down.png" HeightRequest="20" WidthRequest="20" VerticalOptions="CenterAndExpand" >
</Image>
</StackLayout>
</StackLayout>
<ListView x:Name="LanguageList" IsVisible="{Binding ShowLanguagePopup}" BackgroundColor="Gray" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown, Property=Y,Factor=1,Constant=40}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=X,Factor=1,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=LanguageDropDown,Property=Height,Factor=1,Constant=10}"
/>
</StackLayout>
</RelativeLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding ChangeLanguageCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
</StackLayout>
</StackLayout>
I have never used it but I think you can try with a RelativeLayout. This is a little demo: 2 buttons and a ListView. ListView has some Constraints to RedButton. You can try to show / hide it and take a look if Green Button (that has Constraints to RedButton too) does not move
<StackLayout VerticalOptions = "FillAndExpand">
<RelativeLayout>
<Button BackgroundColor="Red" x:Name="button" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}" />
<Button BackgroundColor="Green" x:Name="buttonGreen" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=100}" />
<ListView BackgroundColor="Blue" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=Y,Factor=1,Constant=60}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=X,Factor=1,Constant=20}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}"
/>
</RelativeLayout>
</StackLayout>