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;
}
Related
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.
Xamarin iOS application infinitely suspended when CollectionView.IsVisible = false on start up.
on Android, It works. However, on iOS, setting CollectionView.IsVisible = false resulted in application freezed.
<StackLayout
Margin="0,20,0,0">
<Button
HorizontalOptions="CenterAndExpand"
WidthRequest="100"
Clicked="Button_Clicked"
Text="Click Me"/>
<CollectionView
x:Name="Collection"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding Items}"
SelectionMode="Single"
IsVisible="False">
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Vertical"
Span="4"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
Margin="10,10,10,10">
<Image
WidthRequest="50"
HeightRequest="50"
Source="{local:ImageResource CollectionView.Image.png}"/>
<Label
Text="{Binding Title}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
Here is reproducible project.
There is a workaround to solve this for iOS, you could set Visiable of CollectionView after Layout is initialized.
For example, remove IsVisible="False" from Xaml, then set it in ContentPage.cs in OnAppearing method:
protected override void OnAppearing()
{
base.OnAppearing();
Collection.IsVisible = false;
}
The effect:
I have a listview grouped, and everytime i touch the group header, all the items in the group hide, but for some reason the cells remain
I have tried to set a binded IsVisible property to all elements in the ViewCell, but still cant make it work
Heres my ListView xaml code:
<ListView x:Name="GroupsList"
ItemsSource="{Binding Dishes}"
IsGroupingEnabled="True"
SeparatorColor="Black"
SeparatorVisibility="Default"
HasUnevenRows="True"
GroupShortNameBinding="{Binding Key}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="50">
<StackLayout
VerticalOptions="FillAndExpand"
BackgroundColor="LightSlateGray">
<Button BackgroundColor="Transparent"
BorderColor="Transparent"
BorderWidth="0"
Text="{Binding Key}"
TextColor="White"
HorizontalOptions="StartAndExpand"
Command="{Binding BindingContext.SelectGroupHeader, Source={x:Reference DishesPage}}"
CommandParameter="{Binding Key}"
ContentLayout="Right, 300"
ImageSource="next_disclosure"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ContentView Padding="2, 5, 5, 0"
IsVisible="{Binding IsVisible}">
<Frame Padding="2"
HasShadow="False"
BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Margin="10"
Text="{Binding Name}"
TextColor="Black"
FontSize="Medium"
HorizontalOptions="StartAndExpand"></Label>
</StackLayout>
</Frame>
</ContentView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Here is my ViewModel code:
private async Task SelectedGroupHeader(string item)
{
foreach(var group in Dishes)
{
if(item == group.Key)
{
foreach(var dish in group)
{
if (dish.IsVisible)
{
dish.IsVisible = false;
}
else
{
dish.IsVisible = true;
}
}
}
}
}
before hiding:
after hiding
The problem is that you are setting ContentView.IsVisible to false when you want to hide the items, but when you do that you hide the ContentView and the items remain in the list, so you still see the items, but without a ContentView (blanks)!
One way i found out you can achieve your purpose is to store somewhere the items of the tapped group and clear its content when you tap on it. When you do that the group becomes empty, and thus the items in the ListView are not visible anymore. When you tap again in the group header you add again the items to the group so that the ListView displays again your items.
The code i got working is more or less as follows:
In XAML i only removed the binding to ContentView.IsVisible:
<ListView x:Name="GroupsList"
ItemsSource="{Binding Dishes}"
IsGroupingEnabled="True"
SeparatorColor="Black"
SeparatorVisibility="Default"
HasUnevenRows="True"
GroupShortNameBinding="{Binding Key}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="50">
<StackLayout
VerticalOptions="FillAndExpand"
BackgroundColor="LightSlateGray">
<Button BackgroundColor="Transparent"
BorderColor="Transparent"
BorderWidth="0"
Text="{Binding Key}"
TextColor="White"
HorizontalOptions="StartAndExpand"
Command="{Binding BindingContext.SelectGroupHeader, Source={x:Reference DishesPage}}"
CommandParameter="{Binding Key}"
ContentLayout="Right, 300"
ImageSource="next_disclosure"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ContentView Padding="2, 5, 5, 0">
<Frame Padding="2"
HasShadow="False"
BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Margin="10"
Text="{Binding Name}"
TextColor="Black"
FontSize="Medium"
HorizontalOptions="StartAndExpand"></Label>
</StackLayout>
</Frame>
</ContentView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In your ViewModel you would have to do something like:
private async Task SelectedGroupHeader(string item)
{
foreach(var group in Dishes)
{
if(item == group.Key)
{
if(!group.IsHidden)
{
group.Clear();
group.IsHidden = true; // This is simply a flag you can set in your group class to keep track of if the group is collapsed or not
}
else
{
AddItemsToGroup(group)// Add this group all the elements that belongs to it.
group.IsHidden = false;
}
}
}
}
I hope this helps!
Note: this only works if your collection of items is an ObservableCollection, so that the ListView gets notified when the collection changes!
Latest Xamarin on Mac as of writing:
<ContentPage.Content>
<StackLayout>
<ListView x:Name="ItemsListView" ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" HasUnevenRows="true" RefreshCommand="{Binding LoadItemsCommand}" IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}" CachingStrategy="RecycleElement" ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<StackLayout Padding="10">
<Label Text="{Binding Summary}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemTextStyle}" FontSize="Medium" />
<Label Text="{Binding Reporter}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}" FontSize="Micro" />
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text="{Binding Start}" FontSize="Medium" VerticalOptions="Center"/>
<Switch IsToggled="{Binding Result}" Toggled="Handle_Toggled" VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
How do I get the bound item to a Switch control in a ListView. The item is in the list of items bound to the ListView, provided by the ViewModel. You can 'switch' the item's toggle without selecting the row.
void Handle_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e)
{
// In this event handler, how do I get the bound item from the ListView??
}
Normally, what you'd need to do, is to react to the changes of property "Result" in your item class, and keep your logic out of the Page class.
If you need to handle in the event, you can do it this way:
void Handle_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e)
{
var switch = sender as Switch;
var item = switch.Parent.BindingContext as ItemViewModel;
}
Replace ItemViewModel by your item's type.
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?