I am trying to navigate in between pages using listitems but its not working. My home page is MainPage.xaml and I want to navigate to "xyz" when I click on the Aba image in listview
Here is my code:
namespace abc
{
public sealed partial class MainPage : Page
{
ObservableCollection<Class1> list1 = new ObservableCollection<Class1>();
public MainPage()
{
this.InitializeComponent();
Filldata();
}
void Filldata()
{
list1.Add(new Class1 { name = "Aba", image = "ms-appx:///images/aba.png" });
list1.Add(new Class1 { name = "Al", image = "ms-appx:///images/al.png" });
}
private void itemclicked(object sender, ItemClickEventArgs e)
{
var nme = (Class1)e.ClickedItem;
switch (nme.name)
{
case "Aba":
Frame.Navigate(typeof(xyz),null);
break;
}
}
}
}
MainPage.xaml
<ListView x:Name="list" ItemClick="itemclicked">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="100" Width="100" Source="{Binding image}"></Image>
<TextBlock Text="{Binding name}" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Class1.cs
class Class1
{
public String name { get; set; }
public String image { get; set; }
}
You have an issue with your ListView control and the main reason is that you don't have this property in your ListView in XAML:
IsItemClickEnabled="True"
So in order to solve your problem add this property IsItemClickEnabled="True" at ListView in XAML page like this:
<ListView x:Name="list"
ItemClick="itemclicked"
IsItemClickEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="100"
Width="100"
Source="{Binding image}"></Image>
<TextBlock Text="{Binding name}"
HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Your code is fine at navigation methods and other things but you need to "enable" items to be clicked, so add that property in order to can use them with click events.
Related
Basically, when a user clicks a button I would like to add a list of the names of the currently running applications with their icon next to them within a ComboBox. I know how to get my list of applications and my icons but am unsure how to link everything together. My XAML for the ComboBox currently looks like the following:
<ComboBox x:Name="dial1AppSelection" Grid.Column="3" Grid.Row="4" MinHeight="25" Height ="25" MaxHeight="35" MinWidth="120" Margin="4,0,0,0" SelectionChanged="dial1AppSelection_SelectionChanged">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="20" Source="???" />
<TextBlock ><Run Text="???" /></TextBlock>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Add to your combobox
ItemsSource="{Binding YourCollection}"
Create class for your objects:
public class MyProcess
{
public ImageSource Image { get; set; }
public string Text { get; set; }
}
Add such code to your MainWindow.xaml.cs
public ObservableCollection<MyProcess> YourCollection { get; set; }
public MainWindow()
{
InitializeComponent();
YourCollection = new ObservableCollection<MyProcess>();
YourCollection.Add(new MyProcess() { Image ="image1", Text = "txt1"});
DataContext = this;
}
Insert fields names to your xaml code:
Source="{Binding Path=Image}"
Text="{Binding Path=Text}"
How add near item in listview on left side small icon?
WPF Code:
<ListView Name="listView1" x:FieldModifier="public" HorizontalAlignment="Left" Height="501" Margin="10,10,0,0" VerticalAlignment="Top" Width="312">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
Add item to listview
foreach (var item in found)
{
MainWindow.mainWindow.Dispatcher.Invoke(new Action(delegate ()
{
listView1.Items.Add(item);
}));
}
You just need to amend the DataTemplate as shown below.
POCO List View Item (Data Model):
public class MyListItem
{
public string Icon { get; set; }
public string Text { get; set; }
}
Code Behind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var listItemObj = myListView.Items.Add(new MyListItem {Icon = "Default Icon", Text = "Default Text"});
}
}
XAML:
<ListView Name="myListView">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Icon}"/>
<TextBlock Text="{Binding Path=Text}" Padding="5 0 0 0"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Result:
I would like to fill my page from code side.
My page xaml code is here:
<Hub x:Name="MainPageHub" Grid.Row="1" >
<HubSection x:Name="HomeHub" Header="Home" DataContext="{x:Bind m_people, Mode=OneWay}">
<DataTemplate>
<GridView x:Name="PeopleGrid" ItemsSource="{Binding Mode=OneWay}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:PeopleViewModel">
<StackPanel Background="DarkGray" HorizontalAlignment="Left" Margin="6" Orientation="Horizontal">
<Image Width="50" Height="50" Source="{x:Bind PictureUrl, Mode=OneWay}"/>
<TextBlock FontSize="15" Text="{x:Bind Happening, Mode=OneWay}"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal"></ItemsWrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</DataTemplate>
</HubSection>
</Hub>
I try to do this for the loaded event, but the ObservableCollection don't update the UI.
MainPage.xaml.cs:
public sealed partial class MainPage : Page
{
private ObservableCollection<PeopleViewModel> m_people { get; set;}
public MainPage()
{
this.InitializeComponent();
this.Loaded += Page_Loaded;
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
m_people = new ObservableCollection<PeopleViewModel>();
m_people.Add(new PeopleViewModel {Happening = "vaalam", DateTime = DateTime.Now, PictureUrl = "Assets/Data/Picture/1.png"});
m_people.Add(new PeopleViewModel {Happening = "vaalam", DateTime = DateTime.Now, PictureUrl = "Assets/Data/Picture/2.png" });
m_people.Add(new PeopleViewModel {Happening = "vaalam", DateTime = DateTime.Now, PictureUrl = "Assets/Data/Picture/3.png" });
}
But when i fill the m_people collection in the MainPage(), it works. Why doesn't the Page_Loaded work?
I found the answer! The problem was the private ObservableCollection<PeopleViewModel> m_people { get; set;}
I had to change for private ObservableCollection<PeopleViewModel> m_people = new ObservableCollection<PeopleViewModel>();
Sorry for this unwanted question!
I don't know if my understanding of binding is just poor or if I am not seeing the problem, but I hope someone can help me out here. I have a ListView with a template of an image and a TextBlock, I need the TextBlock to be bound to the ItemsSource of the ListView. However when I run this I get nothing shown, I don't even see my image that I have set.
XAML:
<UserControl.Resources>
<FontFamily x:Key="FontFamily">MS Reference Sans Serif</FontFamily>
</UserControl.Resources>
<Grid>
<ListView BorderThickness="0" ItemsSource="{Binding Facies}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="../Images/Shale.png"/>
<TextBlock Text="{Binding FaciesName}" Width="75" Margin="5"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
C#:
public partial class FaciesControl : UserControl
{
public FaciesControl()
{
InitializeComponent();
}
public List<string> Facies {get; set;}
public void Bind(string[] data)
{
Facies = new List<string>();
Facies.AddRange(data);
}
}
First set DataContext like this:
public FaciesControl()
{
InitializeComponent();
string[] str = { "Name1", "Name2", "Name3" };
Bind(str); // Make sure you have called the Bind method
DataContext = Facies;
}
Second change your XAML like this:
<ListView BorderThickness="0" ItemsSource="{Binding}">
....
....
<TextBlock Text="{Binding}" Width="75" Margin="5"/>
While studying C# and XAML binding I recall being able to see bound elements in the design window at design time. However, the strategy I used to bind this collection to my ListView doesn't show the elements until run time which will makes design more difficult.
What I want is for the images and words to appear in the design window which I believe has something to do with the designer creating an instance of a class at design time in order to extract bound elements... I just don't recall the methodology. Any help greatly appreciated!
Here is the relevant XAML:
<Page
x:Class="Class_Name.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Class_Name"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">Program Name</x:String>
</Page.Resources>
<ListView x:Name="CharacterList">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="55,20,20,20">
<TextBlock Text="{Binding Name}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<Image Source="{Binding Image}" Stretch="None" HorizontalAlignment="Left"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Page>
Here is the CharClass:
class CharClass
{
public string Name { get; private set; }
public BitmapImage Image { get; private set; }
public CharClass(string name, string imagePath)
{
Name = name;
Image = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/" + imagePath) };
}
}
Here's the Collection:
class AllCharacters:ObservableCollection<CharClass>
{
public AllCharacters()
{
loadData();
}
private void loadData()
{
this.Add(new CharClass("Barbarian", "125px-C_barbarian.bmp"));
this.Add(new CharClass("Crusader", "125px-Crusader.bmp"));
this.Add(new CharClass("Demon Hunter", "125px-C_demon.bmp"));
this.Add(new CharClass("Monk", "125px-C_monk.bmp"));
this.Add(new CharClass("Witch Doctor", "125px-C_witch.bmp"));
}
}
Here's MainPage.xaml.cs:
public sealed partial class MainPage : Page
{
AllCharacters characterList;
public MainPage()
{
this.InitializeComponent();
this.Loaded += MainPage_Loaded;
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
characterList = new AllCharacters();
CharacterList.ItemsSource = characterList;
}
}
Add DataContext and ItemsSource binding to your XAML, as shown below:
<ListView x:Name="listView" Margin="0" ItemsSource="{Binding Mode=OneWay}">
<ListView.DataContext>
<local:AllCharacters/>
</ListView.DataContext>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="55,20,20,20">
<TextBlock Text="{Binding Name}" />
<Image Source="{Binding Image}" Stretch="None" HorizontalAlignment="Left"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
EDIT: I did the following modifications to get the images displaying:
XAML:
<Image Stretch="None" HorizontalAlignment="Left">
<Image.Source>
<BitmapImage UriSource="{Binding Image}"></BitmapImage>
</Image.Source>
</Image>
CharClass.cs:
class CharClass
{
public string Name { get; private set; }
public string Image { get; private set; }
//public BitmapImage Image { get; private set; }
}