Carousel View not showing - xamarin

I created a CarouselPage but I need CarouselView so I can add other control onto the page. For some reason, nothing showing up. Don't know what I am missing.
public class Zoo
{
public string ImageUrl { get; set; }
public string Name { get; set; }
}
public ObservableCollection<Zoo> Zoos { get; set; }
public PlayKeySound()
{
Zoos = new ObservableCollection<Zoo>
{
new Zoo
{
ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/23c1dd13-333a-459e-9e23-c3784e7cb434/2016-06-02_1049.png",
Name = "Woodland Park Zoo"
},
new Zoo
{
ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/6b60d27e-c1ec-4fe6-bebe-7386d545bb62/2016-06-02_1051.png",
Name = "Cleveland Zoo"
},
new Zoo
{
ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/e8179889-8189-4acb-bac5-812611199a03/2016-06-02_1053.png",
Name = "Phoenix Zoo"
}
};
InitializeComponent();
carousel.ItemsSource = Zoos;
}
Xaml part:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:control="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
x:Class="keysound.PlayKeySound"
x:Name="devicePage"
BackgroundColor="Gray" >
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<control:CarouselView x:Name="carousel" >
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Name}"/>
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
</StackLayout>
</ContentPage.Content>
This is just a testing code to tryout the carousel view.

I was able to run your code and see the data of your collection. I had problems with carousel when I first time installed it. Try two things:
Clean and rebuild the solution. If this doesn't help
Uninstall pre-2, install pre-1. Check if it works. Then update to pre-2.
I know it is strange but that what did it for me.

Related

Getting StateLayout with CustomState to show image thumbnail

In my Xamarin Forms 5 app, I have a form users will fill out to create a post -- similar to Facebook posts.
The effect I'm trying to create is this:
There's an "Add Image" button that allows user to upload an image. Once the image is uploaded, I want to no longer display the button but display a thumbnail version of the uploaded image.
Here's what my XAML looks like:
<StackLayout
xct:StateLayout.CurrentState="{Binding MainState.None}"
xct:StateLayout.CurrentCustomStateKey="{Binding PostImageState}">
<xct:StateLayout.StateViews>
<xct:StateView StateKey="Custom" CustomStateKey="Image set">
<Image
Grid.Row="0"
Grid.Column="0"
Source="{Binding PostImageUrl}"
WidthRequest="30"
HeightRequest="30"/>
</xct:StateView>
</xct:StateLayout.StateViews>
<Button
Text="Add Image"
Command="{Binding AddImageCommand}"
BackgroundColor="{StaticResource SecondaryBackground}"
WidthRequest="100"
HeightRequest="35"
HorizontalOptions="Start"
Margin="10,0,0,0"/>
</StackLayout>
Here's an abbreviated version of my view model:
public class MyViewModel : BaseViewModel
{
public LayoutState _mainState;
string postImageUrl { get; set; }
string postImageState { get; set; } = "No image";
public MyViewModel()
{
Title = string.Empty;
IsBusy = true;
MainState = LayoutState.None;
AddImageCommand = new AsyncCommand(Add_Image_Tapped);
}
public LayoutState MainState
{
get => _mainState;
set => SetProperty(ref _mainState, value);
}
public string PostImageUrl
{
get => postImageUrl;
set
{
if (postImageUrl == value)
return;
postImageUrl = value;
OnPropertyChanged();
}
}
public string PostImageState
{
get => postImageState;
set
{
if (postImageState == value)
return;
postImageState = value;
OnPropertyChanged();
}
}
async Task Add_Image_Tapped()
{
// Upload image
// Once upload is done
PostImageUrl = uploadedFileUrl;
PostImageState = "Image set";
}
}
I haven't been able to get this to work. Currently, it's not even showing the "Add Image" button. Where am I making a mistake?
There are several problems with your code.
1.Since you use Binding for xct:StateLayout.CurrentState, we should bind it to a variable in ViewModel, here we should use MainState not MainState.None:
xct:StateLayout.CurrentState="{Binding MainState}"
2.Based on your requirement, we can use the value from LayoutState enumeration(for example StateKey="Success"),, we don't need add custom states.
3.If we want to hidden the button once uploading the image, we can bind MainState to property IsVisible of button , but need use Converter StateToBooleanConverter to convert State to bool.
Based on your code ,I created a simple demo, and it works properly on my side.
You can refer to the following code:
MyPage.Xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
xmlns:viewmodel="clr-namespace:FormApp0314.ViewModel"
x:Class="FormApp0314.TestPage1">
<ContentPage.BindingContext>
<viewmodel:MyViewModel></viewmodel:MyViewModel>
</ContentPage.BindingContext>
<ContentPage.Resources>
<xct:StateToBooleanConverter x:Key="StateToBooleanConverter" />
</ContentPage.Resources>
<StackLayout
xct:StateLayout.CurrentState="{Binding MainState}">
<xct:StateLayout.StateViews>
<xct:StateView StateKey="Success" CustomStateKey="Image set">
<Image
Grid.Row="0"
Grid.Column="0"
Source="{ Binding PostImageUrl}"
WidthRequest="60"
HeightRequest="60"/>
</xct:StateView>
</xct:StateLayout.StateViews>
<Button
Text="Add Image"
Command="{Binding AddImageCommand}"
IsVisible="{Binding MainState, Converter={StaticResource StateToBooleanConverter}, ConverterParameter={x:Static xct:LayoutState.None}}"
WidthRequest="100"
HeightRequest="35"
HorizontalOptions="Start"
Margin="10,0,0,0" />
</StackLayout>
</ContentPage>
MyViewModel.cs
public class MyViewModel: BaseViewModel
{
public LayoutState _mainState;
string postImageUrl;
string postImageState = "No image";
public ICommand AddImageCommand { get; }
public MyViewModel()
{
MainState = LayoutState.None;
PostImageUrl = "bell.png";
AddImageCommand = CommandFactory.Create(Add_Image_Tapped);
}
async Task Add_Image_Tapped()
{
MainState = LayoutState.Success;
await Task.Delay(3000);
MainState = LayoutState.None;
}
public LayoutState MainState
{
get => _mainState;
set => SetProperty(ref _mainState, value);
}
public string PostImageUrl
{
get => postImageUrl;
set => SetProperty(ref postImageUrl, value);
}
public string PostImageState
{
get => postImageState;
set => SetProperty(ref postImageState, value);
}
}

Why won't Xamarin Forms Webview binding refresh on iOS?

I'm using the WebView and building my own html. I want to bind the webview to changes elsewhere on the form. Here is my xaml:
<WebView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0">
<WebView.Source>
<HtmlWebViewSource x:Name="WebViewSoruce1" Html="{Binding Description}"/>
</WebView.Source>
</WebView>
Here is my model code for the Description:
public string Description
{
get {
return _description;
}
set
{
_description = value;
RaisePropertyChanged();
}
}
This works fine on Android but not for iOS. Any suggestions would be greatly appreciated.
So if anyone else runs into this problem. This is what finally worked for me on both iOS and Android.
I had to bind as a WebViewSource to its Source attribute and not to the HTML. Here is my XAML:
<WebView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0" Source="{Binding WebViewSource}"/>
In my view model I have two properites. One to bind the HTML changes, I named it as Description. The other was to bind to the WebViewSource.
Here is the code-behind:
public HtmlWebViewSource WebViewSource
{
get
{
return new HtmlWebViewSource { Html = _description };
}
}
public string Description
{
get {
return _description;
}
set
{
_description = value;
RaisePropertyChanged();
RaisePropertyChanged("WebViewSource");
}
}
This worked for me.

Binding CarouselPage content pages to view model

I am trying to use a CarouselPage in Xamarin Forms.
<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:views="clr-namespace:TestForms.Views;assembly=TestForms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="TestForms.Views.Photos" ItemsSource="{Binding Pages}">
<CarouselPage.ItemTemplate>
<DataTemplate>
<ContentPage >
<StackLayout VerticalOptions="StartAndExpand" Padding="50">
<Label Text="ContentPage"></Label>
<Label Text="{Binding Title}"></Label>
<Label Text="{Binding Description}"></Label>
</StackLayout>
</ContentPage>
</DataTemplate>
</CarouselPage.ItemTemplate>
</CarouselPage>
In the view model I have
List<ContentPage> ContentPages = new List<ContentPage>();
foreach (var photo in Photos)
{
var page = new ContentPage();
page.BindingContext = new PhotoDetailViewModel(photo);
ContentPages.Add(page);
}
Pages = new ObservableCollection<ContentPage>(ContentPages);
When I render this, I get a list of pages for all the photos. but I can't seem to bind the title or description in the individual page.
What am I missing here?
You have your CarouselPage wired up correctly
Just need to change your view model slightly.
I'm assuming your Title and Description Properties are in your PhotoDetailViewModel?
if so the binding you are creating in your CarouselPage is not working because it is binded to the List of ContentPage, which wouldn't have the properties "Title" and "Description"
in your CarouselPage your have already set up an ItemsSource binding which should automatically set the BindingContext of your child pages in your CarouselPage. So you dont need to do it manually.
So instead create an ObservableCollection of PhotoDetailViewModel in your ViewModel and bind the ItemsSource of your CarouselPage to that.
So Remove:
List<ContentPage> ContentPages = new List<ContentPage>();
foreach (var photo in Photos)
{
var page = new ContentPage();
page.BindingContext = new PhotoDetailViewModel(photo);
ContentPages.Add(page);
}
Pages = new ObservableCollection<ContentPage>(ContentPages);
And add:
Pages = new ObservableCollection<PhotoDetailViewModel>(Photos.Select(p => new PhotoDetailViewModel(p));
Make sure to change the Property Type of Pages to ObservableCollection<PhotoDetailViewModel>
And that should be all you need to change
As I said you should use ContentView instead of ContentPage. Below is working example
public partial class AnotherCarouselPage : ContentPage
{
public class Zoo
{
public string ImageUrl { get; set; }
public string Name { get; set; }
}
public ObservableCollection<Zoo> Zoos { get; set; }
public AnotherCarouselPage()
{
Zoos = new ObservableCollection<Zoo>
{
new Zoo
{
ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/23c1dd13-333a-459e-9e23-c3784e7cb434/2016-06-02_1049.png",
Name = "Woodland Park Zoo"
},
new Zoo
{
ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/6b60d27e-c1ec-4fe6-bebe-7386d545bb62/2016-06-02_1051.png",
Name = "Cleveland Zoo"
},
new Zoo
{
ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/e8179889-8189-4acb-bac5-812611199a03/2016-06-02_1053.png",
Name = "Phoenix Zoo"
}
};
InitializeComponent();
carousel.ItemsSource = Zoos;
carousel.PositionSelected += Carousel_PositionSelected;
carousel.ItemSelected += Carousel_ItemSelected;
}
private void Carousel_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
}
private void Carousel_PositionSelected(object sender, SelectedPositionChangedEventArgs e)
{
}
}
page xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:control="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
x:Class="ButtonRendererDemo.AnotherCarouselPage"
x:Name="devicePage"
BackgroundColor="Gray">
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<control:CarouselView x:Name="carousel" >
<control:CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding Name}"/>
<Image Source="{Binding ImageUrl}"/>
</StackLayout>
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Windows Phone 7 Listbox not displaying

So I have a listbox I am trying to make for an "achievement page". Everything works good if I use a List but when I switch it to a List there is nothing displayed, not even from the xaml...
public partial class achievementPage : PhoneApplicationPage
{
public string Description { get; set; }
public string Type { get; set; }
public achievementPage()
{
InitializeComponent();
loadListbox();
}
public achievementPage(string achievementGet, string d1)
{
}
public void loadListbox()
{
achievementStoreage.loadData();
List<achievementPage> achievementList = new List<achievementPage>();
achievementList.Add(new achievementPage(achievementStoreage.achievement1, "This is a test"));
achievementList.Add(new achievementPage(achievementStoreage.achievement2, "This is another test"));
//List<string> achievementList = new List<string>();
//achievementList.Add("Sup");
achievementListBox.ItemsSource = achievementList;
}
}
<ListBox Name="achievementListBox" Margin="0,0,0,0" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="776" Height="120" BorderBrush="Black">
<Button.Content>
<StackPanel Orientation="Horizontal" Height="50">
<StackPanel Orientation="Horizontal" Height="40">
<TextBlock Width="150" Foreground="Black" FontSize="22" Text="Description:" Height="40"/>
</StackPanel>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
All I get is a blank page.. P.S don't worry about achievementStoreage, it is working properly.(just where I get stored data)
Frankly, it seems that you are simply not allowed to use ItemTemplates along with UIElements as the items' DataContexts. I've tried with:
achievementListBox.ItemsSource = new [] {"a","b"};
and both items were visible and printed dummy "description" texts, but none of the following lines I've tried has presented anything at all:
achievementListBox.ItemsSource = new [] { new TextBlock(), new TextBlock()};
achievementListBox.ItemsSource = new [] { new Rectangle(), new Rectangle()};
achievementListBox.ItemsSource = new [] { new Grid(), new Grid()};
Trying with your custom page - the same. No items shown.
This is very misleading. The items were shown, but look at the lines above: the controls were created empty, with no contents set!.
It turns out, that if the ListBox detects that the Item is an UIElement, then it does not use the ItemTemplate, but it presents that UIElement directly!
achievementListBox.ItemsSource = new[] { new TextBlock() { Text = "bbb" }, new TextBlock() { Text = "eee" } };
achievementListBox.ItemsSource = new[] { new Rectangle() { Fill = new SolidColorBrush(Colors.Red), Width = 30, Height = 10 }, new Rectangle() { Fill = new SolidColorBrush(Colors.Green), Width = 30, Height = 10 } };
var gridA = new Grid() { Width = 110, Height = 40 }; gridA.Children.Add(new Rectangle() { Fill = new SolidColorBrush(Colors.Red) });
var gridB = new Grid() { Width = 110, Height = 40 }; gridB.Children.Add(new Rectangle() { Fill = new SolidColorBrush(Colors.Green) });
achievementListBox.ItemsSource = new[] { gridA, gridB };
All of the three above examples completely ignore the ListBox.ItemTemplate, and instead, they display two items directly: two textboxes, two rectangles, two larger rectangles (in a Grid).
Getting back to your case: It means that with your original setup, the ListBox would try to display the items directly too - as your custom Page is a UIElement. And indeed it did that! But your pages were ... empty. In the overloaded constructor you omitted the InitializeComponent(); that constructs the View by reading the XAML code. Here is a corrected example that displays a "Hello" three times: Once just because it lies on the page, and next two times because the ListBox rows are set to the same page.
Please excuse me for renaming the classes, I simply started a new project instead of pasting your code.
Please note that I had to add to the XAML some other controls, because the Pages used as the data items would be display as empty, because they would have no items set
public partial class MainPage : PhoneApplicationPage
{
public string Description { get; set; }
public string Type { get; set; }
public MainPage()
{
InitializeComponent();
loadListbox();
}
public MainPage(string achievementGet, string d1)
{
InitializeComponent();
someText.Text = d1;
}
public void loadListbox()
{
achievementListBox.ItemsSource = new[] { new MainPage(null, "ddd"), new MainPage(null, "ccc") };
}
}
<StackPanel>
<TextBlock>
<Run Text="Hello" />
<Run Text=" " />
<Run x:Name="someText" />
</TextBlock>
<ListBox Name="achievementListBox" Margin="0,0,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Width="150" Foreground="White"
FontSize="22" Text="This DataTemplate is IGNORED because the Item is UIElement"
Height="40"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
I tried to shape the code in a similar manner to yours, just removed some lines not relevant to the problem. I hope this explains you everything now :)
Oh my. Why do create a list of achievementPages? On your achievementPage you will want to have a ListBox with items of type, like, AchievementItem, CompletedAchievement, NotCompletedAchievement, etc.
Currently, nothing shows up because your code probably throws StackoverflowException (not joking here:)). Look: your achievementPage constructor calls loadListBox that creates two achievementPages and adds them to the list. But creating two achievementPages causes again their constructors to be called two times, which invokes loadListBox two times, and so on..
-- edit: ok, no stackoverflow, I've just noticed the second constructor. You should stick to naming the classes with capital letters you know :) Anyways, putting a Page as a data item of a ListBox on a Page is a bad idea.
What you wanted to get should look more like:
public partial class AchievementPage : PhoneApplicationPage
{
public string Description { get; set; }
public string Type { get; set; }
public AchievementPage()
{
InitializeComponent();
loadListbox();
}
public void loadListbox()
{
var theList = new List<Achievement>();
theList.Add(new Achievement{ AchvCount=3, AchvName="medals" });
theList.Add(new Achievement{ AchvCount=2, AchvName="badges" });
theList.Add(new Achievement{ AchvCount=6, AchvName="zonks" });
achievementListBox.ItemsSource = achievementList;
}
}
public class Achievement : DependencyObject
{
public int AchvCount {get; set;}
public string AchvName {get; set;}
}
<ListBox Name="achievementListBox" Margin="0,0,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="You've got:" />
<TextBlock Grid.Column="0" Text="{Binding AchvCount}" />
<TextBlock Grid.Column="0" Text="{Binding AchvName}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Unable to put images into hub tile

I trying to put some images into the hub tile as the window phone 7 design but i found out even i follow the ebook exactly but i still unable to put the images into it.
Anyone please?
XAML code
<ListBox Grid.Row="0" x:Name="tileList">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:HubTile Title="{Binding Title}" Margin="3" Notification="{Binding Notification}"
DisplayNotification="{Binding DisplayNotification}" Message="{Binding Message}"
GroupTag="{Binding GroupTag}" Source="{Binding ImageUri}">
</toolkit:HubTile>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code Behind
List<TileItem> tileItems = new List<TileItem>()
{
new TileItem()
{
ImageUri="/Images/logo.png", Title="Work Hard", Notification = "Work Hard", GroupTag="TileGroup"
},
new TileItem()
{
ImageUri="/Images/Hard.jpg", Title="Work Smart", Notification = "Work Smart", GroupTag="TileGroup"
},
new TileItem()
{
ImageUri="/Images/Hard.jpg",
Title = "Play Smart",
Message = "Look Smart"
},
new TileItem()
{
ImageUri="/Images/Hard.jpg",
Title = "Sleep Smart",
Message = "Sleep Smart"
},
new TileItem()
{
ImageUri="/Images/Hard.jpg",
Title = "Sleep Hard",
Message = "Sleep Hard"
},
new TileItem()
{
ImageUri="/Images/Hard.jpg", Title="Play Hard", Notification = "Play Hard", GroupTag="TileGroup"
}
};
For the classes which be
public class TileItem
{
public string ImageUri
{
get;
set;
}
public string Title
{
get;
set;
}
public string Notification
{
get;
set;
}
public bool DisplayNotification
{
get
{
return !string.IsNullOrEmpty(this.Notification);
}
}
public string Message
{
get;
set;
}
public string GroupTag
{
get;
set;
}
}
Anyone pls. Thanks
Judging by the way you have the path, I would say its the "Build Action". You might want to check if the image that your trying to display has its "Build Action" set to content.

Resources