I have a content page with the following data template for RadioButtons:
<DataTemplate x:Key="RadioTemplate">
<StackLayout Padding="0,2,0,0">
<StackLayout
Orientation="Horizontal" >
<Label
Text="{Binding Title}"
Style="{StaticResource LabelStyle}">
</Label>
<ImageButton HorizontalOptions="Center"
CornerRadius="6"
VerticalOptions="Center"
Clicked="HelpButton_Clicked"
HeightRequest="12"
WidthRequest="12"
BorderColor="Black"
BackgroundColor="Black"
BorderWidth="1"
IsVisible="{Binding ShowHelpButton}">
<ImageButton.Source>
<FontImageSource FontFamily="FAFreeSolid"
Color="White"
Glyph="{x:Static fa:FontAwesomeIcons.Question}"/>
</ImageButton.Source>
</ImageButton>
</StackLayout>
<Label
Style="{StaticResource HelpStyle}"
Text="{Binding HelpTopic.Text}"
IsVisible="{Binding HelpTopic.IsVisible, Mode=TwoWay}">
</Label>
<StackLayout
RadioButtonGroup.GroupName="{Binding ChoiceList.Code}"
RadioButtonGroup.SelectedValue="{Binding Value}"
BindableLayout.ItemsSource="{Binding ChoiceList.Choices}"
BindableLayout.EmptyView="No choices available"
Orientation="Horizontal"
Margin="10,0,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding Value}"
Content="{Binding Label}"
IsChecked="{Binding IsSelected}"
CheckedChanged="OnRadioChanged"
FlowDirection="LeftToRight">
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</DataTemplate>
It is called from a collection view on the content page:
<StackLayout>
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label
Text="Work Order Request"
HorizontalTextAlignment="Start"
HorizontalOptions="StartAndExpand"
VerticalTextAlignment="Center"
TextColor="White"
FontSize="Large"/>
<Button Text="Back" Clicked="BackButton_Clicked" HorizontalOptions="End" />
</StackLayout>
<Label
Padding="0,2,0,0"
Text="Verify your data before submitting"
HorizontalTextAlignment="Start"
TextColor="White"
FontSize="Micro" />
</StackLayout>
</Frame>
<Label
Margin="10,0,0,0"
Grid.Column="0"
Text="SOME TEXT HERE"
HorizontalOptions="Start"
FontSize="Micro"/>
<CollectionView
ItemsSource="{Binding MainPageView.Fields}"
EmptyView="No fields for this screen."
ItemTemplate="{StaticResource templateSelector}"
SelectionChanged="CollectionView_SelectionChanged">
</CollectionView>
<StackLayout Margin="10,0,10,5" Orientation="Vertical">
<Button Command="{Binding MainPageView.SubmitCommand}" Text="Submit" />
<validator:ErrorSummaryView
IsVisible="{Binding MainPageView.ShowValidationSummary, Mode=OneWay}"
ErrorStateManager="{Binding MainPageView.ErrorStateManager, Mode=OneWay}"
Margin="0,0,0,5"/>
</StackLayout>
</StackLayout>
If I have the App.xaml.cs instantiate the view directly, it displays fine:
public App()
{
InitializeComponent();
MainPage = new MainPage(false);
}
However, if I change and add a landing page that has a button to redirect to that page:
<?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="Test.Ui.Dashboard">
<ContentPage.Content>
<StackLayout>
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
<StackLayout>
<Label
Text="TEST DASHBOARD"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
TextColor="White"
FontSize="Large"/>
<Label
Padding="0,2,0,0"
Text="Sample UI/UX Pages"
HorizontalTextAlignment="Start"
TextColor="White"
FontSize="Micro" />
</StackLayout>
</Frame>
<StackLayout Orientation="Horizontal">
<Button Text="Work Order" Clicked="WorkOrder_Clicked" HorizontalOptions="FillAndExpand" BackgroundColor="#2196F3" TextColor="White" FontAttributes="Bold" FontSize="Large" CornerRadius="10"/>
<Button Text="Randomized Field Order" Clicked="Randomized_Clicked" HorizontalOptions="FillAndExpand" BackgroundColor="#2196F3" TextColor="White" FontAttributes="Bold" FontSize="Large" CornerRadius="10" />
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace Test.Ui
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Dashboard : ContentPage
{
public Dashboard()
{
InitializeComponent();
}
private void WorkOrder_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new MainPage(false));
}
private void Randomized_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new MainPage(true));
}
}
}
and change App.xaml.cs to
using Xamarin.Forms;
namespace Test.Ui
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage( new Dashboard());
}
protected override void OnStart()
{
// load up the style xaml files here
}
protected override void OnSleep()
{
}
protected override void OnResume()
{
}
}
}
Now, when I click the Work Order button, the radio options aren't displayed. If I change the stacklayout for the radio options to veritical orientation, they do. So the data is there but the view isn't able to render when I'm in a NavigationPage. Thoughts? I'd really like to have my radio buttons be horizontal when there aren't many choices.
Thanks
In my data template, I had to add an explicit WidthRequest = 150
<StackLayout
RadioButtonGroup.GroupName="{Binding ChoiceList.Code}"
RadioButtonGroup.SelectedValue="{Binding Value}"
BindableLayout.ItemsSource="{Binding ChoiceList.Choices}"
BindableLayout.EmptyView="No choices available"
Orientation="Horizontal"
Margin="10,0,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding Value}"
Content="{Binding Label}"
IsChecked="{Binding IsSelected}"
VerticalOptions="Center"
IsClippedToBounds="False"
HeightRequest="27"
WidthRequest="150"
CheckedChanged="OnRadioChanged">
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
I guess the StackLayout wasn't able to calculate how wide to make each one. Will see if I can figure out a different way to do it so it adjusts for the width of the content.
I'm trying to get the string value of a selected item from the search bar. If to select Apple, then to get as string the value "Apple".
I have tried to use SearchButtonPressed but is not working at all. This is my code for the search bar.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="Sim.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Main Page">
<ContentPage.Content>
<Grid BackgroundColor="DarkGray">
<StackLayout Margin="10"
VerticalOptions="Start"
HorizontalOptions="Start">
<SearchBar x:Name="searchBar"
HorizontalOptions="Fill"
VerticalOptions="StartAndExpand"
Placeholder="Search Access Points..."
CancelButtonColor="Orange"
PlaceholderColor="Orange"
TextTransform="Lowercase"
HorizontalTextAlignment="Start"
TextChanged="OnTextChanged"
/>
<Label Text="Type in the searchbox."
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand" />
<ListView x:Name="searchResults"
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand"
IsVisible="False"/>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
I solved this issue by adding ItemTapped
<ListView x:Name="searchResults"
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand"
ItemTapped ="GetTappedItem"/>
void GetTappedItem(object sender, ItemTappedEventArgs e)
{
var details = e.Item;
}
Thank you #Jason.
I am unable to bind svg image in xamarin.forms gridview. I have a grid view and I want to add 9 row/column with .SVG images
<StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="#BF4E21" Spacing="1">
<StackLayout>
<abstractions:SvgImage HeightRequest="50" HorizontalOptions="Center" SvgAssembly="{Binding SvgAssembly}" SvgPath="{Binding CoolMaskSvgPath}" VerticalOptions="Center" WidthRequest="50" />
</StackLayout>
<StackLayout>
<Label Text="Men" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
</StackLayout>
public Assembly SvgAssembly => typeof(App).GetTypeInfo().Assembly;
public string CoolMaskSvgPath => "001-travel-1.svg";
public LookUp()
{
InitializeComponent();
BindingContext = this;
}
Im trying to show an Overlay with an activityIndicator by clicking an custom sync button in the toolbar. The Button makes an API call to get datas from my backend.
Im using Xamarin forms with the Prism Plugin
This is my MasterDetailPage Xaml
<MasterDetailPage.ToolbarItems >
<ToolbarItem Command="{Binding SyncCommand}" Icon="sync32.png">
</ToolbarItem>
</MasterDetailPage.ToolbarItems>
<MasterDetailPage.Master >
<ContentPage Title="Default"
BackgroundColor="Gray">
<StackLayout Padding="0,60,0,0">
<ListView x:Name="Menu"
VerticalOptions="FillAndExpand"
HorizontalOptions="Fill"
ItemsSource="{Binding Items}"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout MinimumHeightRequest="48"
Orientation="Horizontal"
Spacing="40">
<Label Text="{Binding TitleKey}"
TextColor="White"
FontSize="20"
VerticalOptions="Center"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<behaviors:ListViewItemSelectedBehavior Command="{Binding ChangePageCommand }"/>
</ListView.Behaviors>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage>
<AbsoluteLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<ActivityIndicator
Color="#69d2e7"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.33}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.33}"
IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}"
/>
</AbsoluteLayout>
</ContentPage>
</MasterDetailPage.Detail>
This is my MasterDetail xaml cs
public SMasterDetail()
{
InitializeComponent();
Menu.ItemSelected += async (s, e) =>
{
Menu.SelectedItem = null;
IsPresented = false;
await Task.Delay(200);
};
}
When im clicking on The Sync button in the toolbar the ViewModel gets the datas from the backend and populate an ObservableCollection. Im setting IsBusy to true and after that to false.
But I cant see the overlay. Is their any solution how to show the activityIndicator overlay on each page by clicking the sync button?
I Try To Navigate from ListView Page The List View Return Data From Sqlit
The Code Below from firt Page when I select from ListView :
Xaml Code :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FirstTestApp.AllTripsPage"
Title="AllTrips">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<ListView x:Name="TripsList" ItemSelected="TripsList_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="5,5,5,5">
<Label Text="{Binding Name}" FontSize="Medium" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
C# Function :
private async void TripsList_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
if (e.SelectedItem == null)
{
return;
//ItemSelected is called on deselection,
//which results in SelectedItem being set to null
}
var Selected = (Trip)e.SelectedItem;
await Navigation.PushAsync(new ShowTrip(Selected));
}
this Code in Page ShowTrip which it view some details about item I choice:
xaml Code :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FirstTestApp.ShowTrip"
Title="Trip Details">
<ContentView.Content>
<Label Text="Trip Details" />
<Label Text="Name" />
<Label Text ="{Binding Name}" />
<Label Text="Description" />
<Label Text ="{Binding Description}"/>
<Label Text="Done:" />
<Label Text ="{Binding Done}"/>
</ContentView.Content>
C#:
public partial class ShowTrip : ContentPage
{
Trip SelectTrip;
public ShowTrip(Trip Selected)
{
InitializeComponent();
SelectTrip = Selected;
BindingContext = SelectTrip;
}
}
The Error Appear in InitializeComponent() Function :
private void InitializeComponent() {
this.LoadFromXaml(typeof(ShowTrip));///in This Line Exception happened
}
The error is :"Object does not match target type"
Try to use StackLayout instead of <ContentView.Content> on ShowTrip page.