I'm trying to set the height and width of my image and have it a fixed size however if I shrink the container (frame, stackpanel, grid, etc...) the image shrinks along with it. However I would have assumed setting the height and width (WidthRequest, HeightRequest, MinimumHeightRequest, MinimumWidthRequest) would have forced the image to remain the set size... however it doesn't/
What can I do...
Try this; This will set the width and height of the image with the platform specific dimensions i.e. it will use dp for android and points for iOS.
<Image IsVisible="true">
<Image.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="72" Android="100" WinPhone="10" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="212" Android="140" WinPhone="10" />
</OnIdiom.Tablet>
</OnIdiom>
</Image.HeightRequest>
<Image.WidthRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="125" Android="150" WinPhone="10" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="265" Android="190" WinPhone="10" />
</OnIdiom.Tablet>
</OnIdiom>
</Image.WidthRequest>
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource">
<OnPlatform.iOS>
<FileImageSource File="logo.png" />
</OnPlatform.iOS>
<OnPlatform.Android>
<FileImageSource File="logo.png" />
</OnPlatform.Android>
<OnPlatform.WinPhone>
<FileImageSource File="logo.png" />
</OnPlatform.WinPhone>
</OnPlatform>
</Image.Source>
</Image>
Related
As i shows in attached images, my grid row is square shaped space before connecting to server and load the images, but when images are loaded it changes it's height and become rectangle shape. how can i avoid it ? i want to keep the square shaped space.
my photos are also squared.
before and after after connecting to server
[1]: https://i.stack.imgur.com/lZj6F.png
[2]: https://i.stack.imgur.com/ZaKQd.png
Code :
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Image x:Name="imgStation1" Grid.Row="0" Grid.Column="0" BackgroundColor="White" Source="saturday.jpg" Aspect="AspectFill" />
<StackLayout Grid.Row="0" Grid.Column="0" VerticalOptions="StartAndExpand" Spacing="10" Margin="10">
<Label x:Name="lblLiveStation1" Text="" FontSize="Small" TextColor="AntiqueWhite">
<Label.FontFamily>
<OnPlatform
x:TypeArguments="x:String"
Android="gothic.ttf#gothic"
iOS="Optima-Regular" />
</Label.FontFamily>
</Label>
<Label x:Name="lblDescriptionStation1" Text="Loading..." FontSize="Medium" FontAttributes="Bold" TextColor="FloralWhite">
<Label.FontFamily>
<OnPlatform
x:TypeArguments="x:String"
Android="gothic.ttf#gothic"
iOS="Optima-Regular" />
</Label.FontFamily>
</Label>
<Label x:Name="lblTimeStation1" Text="" FontSize="Small" FontAttributes="Bold" TextColor="GhostWhite">
<Label.FontFamily>
<OnPlatform
x:TypeArguments="x:String"
Android="gothic.ttf#gothic"
iOS="Optima-Regular" />
</Label.FontFamily>
</Label>
<ImageButton x:Name="imgPlayPause0" Grid.Row="0" VerticalOptions="End" HorizontalOptions="Start" Source="playlogo.png" BackgroundColor="Transparent" Clicked="imgPlayPause0_Clicked"></ImageButton>
</StackLayout>
</StackLayout>
Have you tried giving Aspect="Fill" ?
If you want to have image with height = width(i.e., Square), then give hardcoded width or height to it.
If that is not possible in your case, then try using RelativeSource where WidthHeight ="*" and height will be relative to Width like this WidthRequest="{Binding Source={x:Reference Self}, Path=WidthRequest}}"
I have defined a resource in App.xaml which am trying to read from a view model class.
Different versions which were tried
<OnPlatform x:Key="HandpickedPhone"
x:TypeArguments="x:Double"
Android="250"
iOS="240" />
<OnPlatform x:Key="HandpickedTablet"
x:TypeArguments="x:Double"
Android="375"
iOS="360" />
<OnIdiom x:Key="HandpickedHeight"
x:TypeArguments="x:Double"
Phone="{StaticResource HandpickedPhone}"
Tablet="{StaticResource HandpickedTablet}" />
<OnPlatform x:Key="HorizontalListHeight"
x:TypeArguments="x:Double">
<OnPlatform.Android>
<OnIdiom x:TypeArguments="x:Double"
Phone="250"
Tablet="375" />
</OnPlatform.Android>
<OnPlatform.iOS>
<OnIdiom x:TypeArguments="x:Double"
Phone="240"
Tablet="260" />
</OnPlatform.iOS>
</OnPlatform>
I am trying to read it and set the height request dynamically like,
double height = (double)App.Current.Resources["HorizontalListHeight"];
horizontalStack.HeightRequest = height;
But casting to double throws IllegalCastException, and at the same time, I am able to cast into the correct value from the watcher in VS.
You have to use Width or Height or Thickness in x:TypeArguments
Like this:-
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.Platforms>
<On Platform="iOS" Value="0, 20, 0, 0" />
<On Platform="Android" Value="0, 0, 0, 0" />
<On Platform="UWP" Value="0, 0, 0, 0" />
</OnPlatform.Platforms>
</OnPlatform>
First , check https://forums.xamarin.com/discussion/comment/354754/#Comment_354754.
Here height is not double , it is OnPlatform<double> , so modify your code as
var height = (OnPlatform<double>)App.Current.Resources["HorizontalListHeight"];
horizontalStack.HeightRequest = height;
However , it's not the recommended way , we often use Style in ResourceDictionaty.
<Style x:Name="HorizontalListHeight" TargetType="StackLayout">
<Setter Property="HeightRequest">
<Setter.Value>
<OnPlatform x:TypeArguments="x:Double">
<OnPlatform.Android>
<OnIdiom x:TypeArguments="x:Double" Phone="250" Tablet="375" />
</OnPlatform.Android>
<OnPlatform.iOS>
<OnIdiom x:TypeArguments="x:Double" Phone="240" Tablet="260" />
</OnPlatform.iOS>
</OnPlatform>
</Setter.Value>
</Setter>
</Style>
horizontalStack.Style = Application.Current.Resources["HorizontalListHeight"] as Style;
i have a view which contains entry fields kept inside the scrollView,here when i tapped on entry field the keyboard popups and covers the remaining fields,by following this i couldnt able to solve my problem.i chnged my main activity as [Activity(Label = "MyApp", Icon = "#drawable/icon", Theme = "#style/MainTheme", MainLauncher = false, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation, WindowSoftInputMode = SoftInput.AdjustResize)] and also checked for AdjustPan nothing worked,how to scroll those fields upto last field when keyboardpopups?
<ContentView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollView Orientation="Vertical">
<StackLayout Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Padding="10">
<StackLayout.Spacing>
<OnIdiom x:TypeArguments ="x:Double" Phone = "8" Tablet ="16"/>
</StackLayout.Spacing>
<Entry x:Name="FirstNameEntry" PlaceholderColor="#9E9E9E" Text="{Binding FirstName}" Placeholder="First name" HorizontalOptions="FillAndExpand" TextColor="#191919" FontFamily="Avenir Book">
<Entry.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="45" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</Entry.HeightRequest>
</Entry>
<Entry x:Name="LastNameEntry" Text="{Binding LastName}" PlaceholderColor = "#9E9E9E" Placeholder="Last name" HorizontalOptions="FillAndExpand" TextColor="#191919" FontFamily="Avenir Book">
<Entry.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="45" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</Entry.HeightRequest>
</Entry>
<Entry x:Name="MobileNameEntry" Keyboard="Numeric" PlaceholderColor="#9E9E9E" Text="{Binding MobileNumber}" TextChanged = "On_PhoneNumberTextChanged" Placeholder="Mobile number" HorizontalOptions="FillAndExpand" TextColor="#191919" FontFamily="Avenir Book">
<Entry.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="45" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</Entry.HeightRequest>
</Entry>
<Entry x:Name="HouseNumberEntry" Text="{Binding HouseNumber}" PlaceholderColor="#9E9E9E" Placeholder="House number" HorizontalOptions="FillAndExpand" TextColor="#191919" FontFamily="Avenir Book">
<Entry.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="45" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</Entry.HeightRequest>
</Entry>
<Entry x:Name="StreetNameEntry" Text="{Binding StreetName}" PlaceholderColor="#9E9E9E" Placeholder="Street name" HorizontalOptions="FillAndExpand" TextColor="#191919" FontFamily="Avenir Book">
<Entry.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="45" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</Entry.HeightRequest>
</Entry>
<Entry x:Name="CityNameEntry" Text="{Binding City}" PlaceholderColor="#9E9E9E" Placeholder="City" HorizontalOptions="FillAndExpand" TextColor="#191919" FontFamily="Avenir Book">
<Entry.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="45" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</Entry.HeightRequest>
</Entry>
<Entry x:Name="PostCodeEntry" Text="{Binding PostalCode}" PlaceholderColor="#9E9E9E" Placeholder="Post code" HorizontalOptions="FillAndExpand" TextColor="#191919" FontFamily="Avenir Book">
<Entry.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="45" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</Entry.HeightRequest>
</Entry>
<Picker x:Name="AddressTypePicker" Title="Select type" HorizontalOptions="FillAndExpand" SelectedIndexChanged="AddressTypePicker_OnSelectedIndexChanged">
<Picker.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="45" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</Picker.HeightRequest>
</Picker>
</StackLayout>
</ScrollView>
<StackLayout BackgroundColor="#f2c646" Grid.Row="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Padding="0">
<StackLayout.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="50" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="50" Android="60" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</StackLayout.HeightRequest>
<StackLayout Padding="10">
<Label Text="Cancel" TextColor="Black" HorizontalOptions="StartAndExpand" FontFamily="Avenir Book" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCancelBtnClicked"/>
</Label.GestureRecognizers>
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="15" Android="17" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="20" Android="22" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</Label.FontSize>
</Label>
</StackLayout>
<StackLayout HorizontalOptions="EndAndExpand" Padding="10">
<Label Text="Save" TextColor="Black" VerticalTextAlignment="Center" FontFamily="Avenir Book">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SaveCommand}"/>
</Label.GestureRecognizers>
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="15" Android="17" WinPhone="28" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="20" Android="22" WinPhone="28" />
</OnIdiom.Tablet>
</OnIdiom>
</Label.FontSize>
</Label>
</StackLayout>
</StackLayout>
</Grid>
I believe you have a situation of signup form. Why don't you use tableview with Intent="Form" as table view has a built-in scroller which can accommodate for keep-entry-in-view behaviour. It gives native look of a form as well.
I used it in one of my projects and it worked perfectly on both iOS and Android.
<TableView Intent="Form" HasUnevenRows="true">
</TableView>
Reference: TableView
Hope this helps
I am new to Xamarin forms.I am designing an application in which I want to display a list of pickers in a list view.The vales in the picker should be dynamic.Below is the code I have written.I struck at writing a List of Picker items in a List.Please anyone help me.Sorry for my English.Thanks in advance.
<ListView x:Name="WindowsList" BackgroundColor="Transparent"
ItemsSource="{Binding KitchenWindowsList}"
HeightRequest="300" IsVisible="{Binding KitchenVisibility}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5" HorizontalOptions="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding KitchenWindowName}" TextColor="#ece6dd" FontAttributes="Bold">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="15" Android="15" WinPhone="15" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="20" Android="20" WinPhone="20" />
</OnIdiom.Tablet>
</OnIdiom>
</Label.FontSize>
</Label>
<Picker x:Name="CurtainTypePicker" ItemsSource="{Binding TypeList}" Title="Choose Curtain" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Picker.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="40"/>
</OnIdiom.Tablet>
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30" Android="45"/>
</OnIdiom.Phone>
</OnIdiom>
</Picker.HeightRequest>
</Picker>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am working on a listview in which I have a label and Picker.I want to detect the selected item of the picker which is inside the list view.I am not able to access the x:Name of picker in Xaml.cs file.Below is my code.Any one please help me if i am going in a wrong direction.Thanks in Advance.
Here is my Xaml code:
<ListView x:Name="MasterRoomList" BackgroundColor="Transparent"
ItemsSource="{Binding MasterRoomWindowsList}"
IsVisible="{Binding RoomsVisibility}" ItemTapped="OnItemTapped" SeparatorVisibility="None">
<ListView.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="150" Android="150" WinPhone="150" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="300" Android="300" WinPhone="300" />
</OnIdiom.Tablet>
</OnIdiom>
</ListView.HeightRequest>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding RoomName}" TextColor="Black" FontFamily="Avenir Book" VerticalTextAlignment="Center">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="13" Android="13" WinPhone="13" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="20" Android="20" WinPhone="20" />
</OnIdiom.Tablet>
</OnIdiom>
</Label.FontSize>
</Label>
<Picker x:Name="CurtainPicker" BackgroundColor="Transparent" TextColor="Black" ItemsSource="{Binding CurtainsTypeList}" SelectedIndexChanged="CurtainPicker_OnSelectedIndexChanged" Title="Select Style" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
<Picker.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="40"/>
</OnIdiom.Tablet>
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30" Android="30"/>
</OnIdiom.Phone>
</OnIdiom>
</Picker.HeightRequest>
</Picker>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Here is my Xaml.cs Code:
private void CurtainPicker_OnSelectedIndexChanged(object sender, EventArgs e)
{
var selectedItem = (string) CurtainPicker.SelectedItem;
}
var picker = (Picker)sender;
var selectedItem = (string) picker.SelectedItem;