For my current projet i want to make an UI where information are displayed on "tile" which i designed as a Grid with other Label and progress bar into. But i can't figure out how to make those tiles displayed on my main grid.
I already tried Gridview that didn't work with the exemples on the web and making someway without grid isn't really easy.
This is the grid to insert as many times as needed
<Grid Margin="10" Background="AntiqueWhite" Grid.Row="0" Grid.Column="0">
<Label Content="{Binding fieldname}" FontFamily="Arial Black" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,20,0,0"/>
<Label Content="{Binding datebegin}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="85,85,0,0" FontFamily="Arial Black" FontSize="18" />
<Label Content="{Binding dateend}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="285,85,0,0" FontFamily="Arial Black" FontSize="18" />
<ProgressBar Margin="0,150,0,0" Value="{Binding progression}" Background="White" BorderBrush="Black" VerticalAlignment="Top" Height="50" />
</Grid>
I need a way to add the exact tile produced into a grid (or anything else that can get onto a scrollviewer with 3 column and unlimited lines obviously).
Below is the xmal. I have used ItemsControl and the WrapPanel as ItemsPanelTemplate to wrap the ItemsControl's items
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="Add" Height="26" Width="75" Command="{Binding Add}" Grid.Row="0"/>
<ScrollViewer Height="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1">
<ItemsControl ItemsSource="{Binding Items}" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Margin="10,10,0,0" BorderBrush="Black" BorderThickness="1">
<StackPanel Width="200" Height="Auto">
<Label Content="{Binding fieldname}" FontFamily="Arial Black" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0"/>
<Label Content="{Binding datebegin}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" FontFamily="Arial Black" FontSize="18" />
<Label Content="{Binding dateend}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" FontFamily="Arial Black" FontSize="18" />
<ProgressBar Value="{Binding progression}" Margin="5,10,5,10" Background="White" BorderBrush="Black" VerticalAlignment="Top" Height="20" />
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
And the viewmodel is
public class Item
{
public string fieldname
{
get;
set;
}
public string datebegin
{
get;
set;
}
public string dateend
{
get;
set;
}
public string progression
{
get;
set;
}
public Item(int number)
{
fieldname = "Filed name " + number;
datebegin = "12-12-12";
dateend = "14-12-12";
progression = (5 * number).ToString();
}
}
public class ViewModel
{
public ICollection<Item> Items
{
get;
private set;
}
public ViewModel()
{
Items = new ObservableCollection<Item>();
}
public ICommand Add
{
get
{
return new RelayCommand((a) =>
{
Items.Add(new Item(Items.Count));
});
}
}
}
Relaycommand
public class RelayCommand : ICommand
{
private Action<object> execute;
private Predicate<object> canExecute;
public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
{
this.execute = execute;
this.canExecute = canExecute;
}
public bool CanExecute(object parameter)
{
return canExecute == null || canExecute(parameter);
}
public void Execute(object parameter)
{
execute(parameter);
}
public event EventHandler CanExecuteChanged
{
add
{
CommandManager.RequerySuggested += value;
}
remove
{
CommandManager.RequerySuggested -= value;
}
}
Related
so I've been working on a smart home implementation in c# for quite a while now but I can't figure out how to inform the Command which executes something, in this case just a remove button as an example, about the item of the Observable that triggers it.
To implement the Collection I'm using a template which also contains a button so that each item of the Collection has a button by it's own.
ObservableCollection with remove Button for each Item
So as you see in there, I have a Remove Button for each Item that is in the ObservableCollection and if I press it I want the Item which contains the Button to be removed but without using something like selectedItem because in that case I need to selected the item first before using the button which is not what I really want because you can press the button without selecting the item/row.
In later time the button will be exchanged for a different function which needs to know which item the button belongs to.
xaml code:
<Page x:Class="Smart_Home.switchPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Smart_Home"
mc:Ignorable="d"
Title="switchPage" Height="490" Width="998" Background="#10636e" >
<Page.Resources>
<local:SwitchViewmodel x:Key="SwitchViewmodel" />
<DataTemplate x:Key="UserTemplate">
<StackPanel>
<Grid>
<Grid Width="970" Margin="0,0,0,0">
<Grid HorizontalAlignment="Left" VerticalAlignment="Center" Width="300">
<TextBlock Text="{Binding Path=schalterName}"/>
</Grid>
<Grid HorizontalAlignment="Center" Width="380">
<Grid HorizontalAlignment="Left" VerticalAlignment="Center" Width="200">
<TextBlock Text="{Binding Path=schalterRaum}"/>
</Grid>
<Grid HorizontalAlignment="Right" VerticalAlignment="Center" Width="30">
<TextBlock Text="{Binding Path=schalterNummer}"/>
</Grid>
</Grid>
<Grid HorizontalAlignment="Right" VerticalAlignment="Center" Width="60">
<Button Content="Switch" Height="40" Command="{Binding RemoveSelectedSwitch, Source={StaticResource SwitchViewmodel}}" />
</Grid>
</Grid>
</Grid>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid x:Name="WindowSelection" HorizontalAlignment="Left" Height="490" Margin="0,0,0,0" VerticalAlignment="Top" Width="998">
<Grid Height="400" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Grid x:Name="ListNameGrid" VerticalAlignment="Top" Height="30">
<Grid HorizontalAlignment="Left" Margin="10,0,0,0">
<Label Content="Name" FontSize="14" Foreground="White"/>
</Grid>
<Grid HorizontalAlignment="Center" Width="400">
<Grid HorizontalAlignment="Left">
<Label Content="Room" FontSize="14" Foreground="White"/>
</Grid>
<Grid HorizontalAlignment="Right">
<Label Content="Number" FontSize="14" Foreground="White"/>
</Grid>
</Grid>
<Grid HorizontalAlignment="Right" Margin="0,0,10,0">
<Label Content="Status" FontSize="14" Foreground="White" />
</Grid>
</Grid>
<Grid x:Name="ListGrid" VerticalAlignment="Top" Margin="0,30,0,0">
<ListBox x:Name="Switches_lb" IsSynchronizedWithCurrentItem="true" FontSize="20" Foreground="White" ItemsSource="{Binding SwitchesList, Source={StaticResource SwitchViewmodel}}" ItemTemplate="{StaticResource UserTemplate}" Background="#10636e" BorderThickness="0" Margin="5,0,5,0"/>
</Grid>
</Grid>
</Grid>
</Page>
Viewmodel:
public class SwitchViewmodel
{
public int selectedCollection { get; }
public ObservableCollection<SwitchView> SwitchesList { get; set; }
public ICommand AddNewSwitch { get; set; }
public ICommand RemoveSelectedSwitch { get; set; }
public SwitchViewmodel()
{
AddNewSwitch = new Command(AddNewSwitchExecuteMethod, AddNewSwitchcanexecuteMethod);
RemoveSelectedSwitch = new Command(RemoveSelectedSwitchExeCuteMethod, RemoveSelectedSwitchAddNewSwitchcanexecuteMethod);
SwitchesList = new ObservableCollection<SwitchView>
{
new SwitchView() { schalterName = "Wandlampe", schalterRaum = "Wohnzimmer", schalterNummer = 1, schalterStatus = false },
new SwitchView() { schalterName = "Deckenlampe", schalterRaum = "Küche", schalterNummer = 2, schalterStatus = false },
new SwitchView() { schalterName = "Tischlampe", schalterRaum = "Wohnzimmer", schalterNummer = 39, schalterStatus = false },
};
}
private bool RemoveSelectedSwitchAddNewSwitchcanexecuteMethod(object parameter)
{
return true;
}
private void RemoveSelectedSwitchExeCuteMethod(object parameter)
{
//In here remove method
}
private bool AddNewSwitchcanexecuteMethod(object parameter)
{
return true;
}
private void AddNewSwitchExecuteMethod(object parameter)
{
Console.WriteLine("Command test");
Console.WriteLine("Count vorher: " + SwitchesList.Count());
SwitchesList.Add(new SwitchView() { schalterName = "Wandlampe", schalterRaum = "Wohnzimmer", schalterNummer = 1, schalterStatus = false });
Console.WriteLine("Count nachher: " + SwitchesList.Count());
}
}
Collection:
public class SwitchView
{
public string schalterName { get; set; }
public string schalterRaum { get; set; }
public int schalterNummer { get; set; }
public Boolean schalterStatus { get; set; }
}
Command:
public class Command : ICommand
{
Action<object> executeMethod;
Func<object, bool> canexecuteMethod;
public Command(Action<object> executeMethod, Func<object, bool> canexecuteMethod)
{
this.executeMethod = executeMethod;
this.canexecuteMethod = canexecuteMethod;
}
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
executeMethod(parameter);
}
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
}
So it would be really helpful if someone could help me out with my problem as I'm really new in using MVVM pattern in c# wpf.
Thank you and have a nice day
add CommandParameter.
<Button Content="Switch" Height="40"
Command="{Binding RemoveSelectedSwitch, Source={StaticResource SwitchViewmodel}}"
CommandParameter="{Binding}" />
and use received parameter in command method.
private void RemoveSelectedSwitchExeCuteMethod(object parameter)
{
var item = parameter as SwitchView;
}
since Button is inside ListBox ItemTemplate, CommandParameter="{Binding}" will return DataContext of ListBoxItem - which means corresponding data item
I have one action in my view model to add record in to entity frame work.I have one action to display the records in the view like this :
private void FillProspects()
{
var q = (from a in ctx2.Prospects// 'ctx' is the object of entity
select a).ToList();
this.Prospects = q; // 'Porspects' is a collection of entity class this I have bound with my List view in my view
}
This will be called in construction of my view model.as a result the list view in my view will be showing the records .
I have one add record action in my view model..I have created properties in my view model corresponding to properties generated in the entity class for example:
private String _FirstName;
public String FirstName
{
get
{
return _FirstName;
}
set
{
_FirstName = value;
}
}
And my add record action in the view model is :
public void Add1()
{
newprospect = new Prospect();
newprospect.ID = Guid.NewGuid();
newprospect.FirstName = FirstName;
newprospect.LastName = LastName;
newprospect.Address = Address;
newprospect.State = State;
newprospect.City = City;
newprospect.ZIP = ZIP;
prospect = newprospect;
ctx2.AddToProspects(prospect);
FillProspects();
//RaisePropertyChanged("Prospects");
}
I have inherited the : INotifyPropertyChanged and imported it's
using System.Windows.Input;
public event PropertyChangedEventHandler PropertyChanged = delegate { };
private void RaisePropertyChanged(string property) { PropertyChanged(this, new PropertyChangedEventArgs(property)); }
But my notification is not refreshing my view Listview records after adding record .so I just call the fill records method 'FillProspects' in the addrecord action..Is this right way of doing MVVM .Why my Listview is not getting refreshed after add record action where I am missing?I have tried with
RaisePropertyChanged("Prospects");in the Add record action...but it is not refreshing .So I just called fill method action again
My complete view model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Windows.Input;
using System.Collections.ObjectModel;
namespace Wpfentity3
{
public class frmProspects_VM : INotifyPropertyChanged
{
TestsEntities ctx2 = new TestsEntities();
public ObservableCollection<Prospect> prospects { get; set; }
//This is the collection where records - er, entities - returned by a query are stored;
//Prospect is the generated class that defines a record - er,
//an entity as well as the query for that table.
private CommandMap _Commands;
public CommandMap Commands { get { return _Commands; } }
Prospect newprospect;
//This holds a new prospect that is created and then added to the prospects collection
private Prospect _prospect;
public Prospect prospect {
get
{
return _prospect;
}
set
{
_prospect = value;
RaisePropertyChanged("prospect");
}
}
//prospect is the object that holds the current record from the Prospects table.
//MainWindow controls are bound to this object
public frmProspects_VM()
{
//FillProspects();
ctx2 = new TestsEntities();
//This instantiates the EntityManager class ;
prospects = new ObservableCollection<Prospect>();
//This instantiates the prospects collection of Prospect records - er, entities;
_Commands = new CommandMap();
_Commands.AddCommand("Add", x => Add1());
}
private ObservableCollection<Prospect> _prospects;
public ObservableCollection<Prospect> Prospects
{
get
{
return _prospects;
}
set
{
_prospects = value;
RaisePropertyChanged("Prospects");
}
}
private String _FirstName;
public String FirstName
{
get
{
return _FirstName;
}
set
{
_FirstName = value;
}
}
private String _LastName;
public String LastName
{
get
{
return _LastName;
}
set
{
_LastName = value;
}
}
private String _Address;
public String Address
{
get
{
return _Address;
}
set
{
_Address = value;
}
}
private String _State;
public String State
{
get
{
return _State;
}
set
{
_State = value;
}
}
private String _City;
public String City
{
get
{
return _City;
}
set
{
_City = value;
}
}
private String _ZIP;
public String ZIP
{
get
{
return _ZIP;
}
set
{
_ZIP = value;
}
}
public void Add1()
{
newprospect = new Prospect();
newprospect.ID = Guid.NewGuid();
newprospect.FirstName = FirstName;
newprospect.LastName = LastName;
newprospect.Address = Address;
newprospect.State = State;
newprospect.City = City;
newprospect.ZIP = ZIP;
prospect = newprospect;
ctx2.AddToProspects(prospect);
Prospects.Add(newprospect);
}
public event PropertyChangedEventHandler PropertyChanged = delegate { };
private void RaisePropertyChanged(string property) { PropertyChanged(this, new PropertyChangedEventArgs(property)); }
}
}
My view xamal:
<Window x:Class="Wpfentity3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowStartupLocation="CenterScreen"
Title="Prospects"
Height="482" Width="500" MaxWidth="500" MaxHeight="600"
xmlns:cusns="clr-namespace:Wpfentity3">
<StackPanel Height="290" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" >
<Label
Content="Prospects"
BorderBrush="Blue" BorderThickness="1"
HorizontalAlignment="Left" VerticalAlignment="Top"
FontSize="24" FontFamily="Comic Sans MS"
Padding="13,3,13,9" Margin="5"
Foreground="Purple" Background="LemonChiffon" />
<Label
Content="{Binding Path=label}" Foreground="Red" FontSize="14"
HorizontalAlignment="Right" VerticalAlignment="Center"
Height="auto" Margin="180,0,10,0" />
</StackPanel>
<Grid
HorizontalAlignment="Left" VerticalAlignment="Top"
Height="120" Width="475" >
<Grid.RowDefinitions>
<RowDefinition Height="25*" />
<RowDefinition Height="25*" />
<RowDefinition Height="25*" />
<RowDefinition Height="25*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90*" />
<ColumnDefinition Width="135*" />
<ColumnDefinition Width="45*" />
<ColumnDefinition Width="32*" />
<ColumnDefinition Width="57*" />
<ColumnDefinition Width="118*" />
</Grid.ColumnDefinitions>
<Label
Content="First name"
Grid.Row="0" Grid.Column="0" Margin="0,0,5,0"
HorizontalAlignment="Right" VerticalAlignment="Center" />
<TextBox Name="txtFirstName"
Grid.Column="1"
HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Path=FirstName}"
Width="130" />
<Label
Content="Last name"
Grid.Row="1" Grid.Column="0" Margin="0,0,5,0"
HorizontalAlignment="Right" VerticalAlignment="Center" />
<TextBox Name="txtLastName"
Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding LastName}"
Width="130" />
<Label
Content="Address"
Grid.Row="2" Grid.Column="0" Margin="0,0,5,0"
HorizontalAlignment="Right" VerticalAlignment="Center" />
<TextBox Name="txtAddress"
Grid.Row="2" Grid.Column="1"
HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Address}"
Width="300" Grid.ColumnSpan="5" />
<Label
Content="City"
Grid.Row="3" Grid.Column="0" Margin="0,0,5,0"
HorizontalAlignment="Right" VerticalAlignment="Center" />
<TextBox Name="txtCity"
Grid.Row="3" Grid.Column="1"
HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding City}"
Width="130" />
<Label
Content="State"
Grid.Row="3" Grid.Column="2" Margin="0,0,5,0"
HorizontalAlignment="Right" VerticalAlignment="Center" />
<TextBox Name="txtState"
Grid.Row="3" Grid.Column="3" Width="30" MaxLength="2" CharacterCasing="Upper" Text="{Binding State}"
HorizontalAlignment="Left" VerticalAlignment="Center" />
<Label
Content="ZIP code"
Grid.Row="3" Grid.Column="4" Margin="0,0,5,0"
HorizontalAlignment="Right" VerticalAlignment="Center" />
<TextBox Name="txtZIP"
Grid.Row="3" Grid.Column="5" MaxLength="10"
HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding ZIP}"
Width="90" />
</Grid>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button Name="btnFind"
Content="_Find"
Width="auto" Margin="5,0,5,0" Padding="10,0,10,0" />
<Button Name="btnAdd"
Content="_Add" Command="{Binding Commands.Add}"
Width="auto" Margin="5,0,5,0" Padding="10,0,10,0" />
<Button Name="btnEdit"
Content="_Edit"
Width="auto" Margin="5,0,5,0" Padding="10,0,10,0" />
<Button Name="btnDelete"
Content="_Delete"
Width="auto" Margin="5,0,5,0" Padding="10,0,10,0" />
<Button Name="btnSave"
Content="_Save"
Width="auto" Margin="5,0,5,0" Padding="10,0,10,0" />
<Button Name="btnCancel"
Content="_Cancel"
Width="auto" Margin="5,0,5,0" Padding="10,0,10,0" />
<Button Name="btnClose"
Content="Cl_ose"
Width="auto" Margin="5,0,5,0" Padding="10,0,10,0"
/>
</StackPanel>
<StackPanel Height="34" Margin="10">
<Grid Margin="10">
<ListView Name="lvprospects" ItemsSource="{Binding Prospects}" Margin="0,0,0,-200">
<ListView.View>
<GridView>
<GridViewColumn Header="FirstName" Width="120" DisplayMemberBinding="{Binding FirstName}" />
<GridViewColumn Header="LastName" Width="50" DisplayMemberBinding="{Binding LastName}" />
<GridViewColumn Header="Address" Width="50" DisplayMemberBinding="{Binding Address}" />
<GridViewColumn Header="City" Width="50" DisplayMemberBinding="{Binding City}" />
<GridViewColumn Header="State" Width="50" DisplayMemberBinding="{Binding State}" />
<GridViewColumn Header="ZIP" Width="50" DisplayMemberBinding="{Binding ZIP}" />
</GridView>
</ListView.View>
</ListView>
</Grid>
</StackPanel>
</StackPanel>
Change the type of the Prospects property from List<Prospect> to ObservableCollection<Prospect>:
private ObservableCollection<Prospect> _prospects = new ObservableCollection<Prospect>();
public ObservableCollection<Prospect> Prospects
{
get
{
return _prospects;
}
set
{
_prospects = value;
RaisePropertyChanged("Prospects");
}
}
And add the new Prospect object to this collection as well in your Add1 method:
public void Add1()
{
newprospect = new Prospect();
newprospect.ID = Guid.NewGuid();
newprospect.FirstName = FirstName;
newprospect.LastName = LastName;
newprospect.Address = Address;
newprospect.State = State;
newprospect.City = City;
newprospect.ZIP = ZIP;
prospect = newprospect;
ctx2.AddToProspects(prospect);
Prospects.Add(newprospect);
}
Just adding it to the DbContext doesn't affect the ListView.
It is fine to add the new item to the DB and then retrieve again the collection with the same refresh method FillProspects:
what you're doing is basically correct.
If you're going to bind a view to a collection in your ViewModel, I suggest using an ObservableCollection.
The ObservableCollection implements INotifyCollectionChanged, it notifies the view when elements are added or removed.
With this you should not need your "FillProspects" method and your "RaisePropertyChanged("Prospects")".
If you want more information I suggest posting how you bind in your XAML and also how you construct your "Prospects" object (we don't even know what type it is, I just assume it isn't an ObservableCollection).
EDIT :
you bind your ListView to "Prospects", but in your ViewModel, I see that "Prospects" is of type "List", it needs to be "ObservableCollection". I see that you have an ObservableCollection named "prospects", but you don't use it anywhere. Could this be the issue ?
I have done something very bad, because I cannot get it to work at all the way I think I should do it.
I am writing a small test harness which is to be used to help my testing team test the use of another service I have written, but in order to test the service I need a client.
Basically I have a list of tweets that I am displaying to the user, and I want them to be able to click on the tweet to find out the original raw payload that was sent via twitter.
my XAML is as follows:
<ItemsControl x:Name="ActivitiesList" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" Margin="2">
<Grid Height="100">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Image Width="Auto" Height="Auto" Source="{Binding Avatar}" Grid.ColumnSpan="1" Grid.RowSpan="2" Grid.Column="0" Grid.Row="0" Margin="2,2,2,2" />
<TextBlock Text="{Binding Author}" Grid.ColumnSpan="3" Grid.RowSpan="1" Grid.Column="1" Grid.Row="0" />
<TextBlock Text="{Binding Id}" Grid.ColumnSpan="1" Grid.RowSpan="1" Grid.Column="3" Grid.Row="0" Margin="0,0,0,0" />
<Border BorderThickness="0" x:Name="border" Grid.ColumnSpan="3" Grid.RowSpan="1" Grid.Column="1" Grid.Row="1" Margin="0.5" />
<TextBlock Text="{Binding Body}" TextAlignment="Left" TextWrapping="Wrap" Grid.ColumnSpan="3" Grid.RowSpan="1" Grid.Column="1" Grid.Row="1" Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}" />
<TextBlock Text="Tags:" Grid.ColumnSpan="1" Grid.RowSpan="1" Grid.Column="0" Grid.Row="2" />
<ItemsControl ItemsSource="{Binding Tags}" Grid.ColumnSpan="2" Grid.Row="2" Grid.Column="1" Margin="0,0,0,0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1,1,1,1" BorderBrush="Black" CornerRadius="5" Margin="1,1,1,1" >
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFEEEE" Offset="0"/>
<GradientStop Color="#FFFFEBEB" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="{Binding}" Margin="3,0,3,0" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Content="View Raw Data" Grid.Column="3" Grid.Row="2" HorizontalAlignment="Right" Width="105" Tag="{Binding}" Click="ButtonBase_OnClick" />
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<!--<local1:Tweet Id="tag:search.twitter.com,2005:823502379551248384 ( 1000 )" Author="jim parslow" Body="This is the content and is going to be very long so that it takes over the page more and more and more" Avatar="https://pbs.twimg.com/profile_images/539113272553648128/sWcgnCan_normal.jpeg" >
<local1:Tweet.Tags>
<System:String>Tag 1</System:String>
<System:String>Tag 2</System:String>
<System:String>Tag 3</System:String>
</local1:Tweet.Tags>
</local1:Tweet>
<local1:Tweet Id="tag:search.twitter.com,2005:823502379551248384 ( 1001 )" Author="jim parslow" Body="This is the content balh" Avatar="https://pbs.twimg.com/profile_images/539113272553648128/sWcgnCan_normal.jpeg" />
<local1:Tweet Id="tag:search.twitter.com,2005:823502379551248384 ( 1002 )" Author="jim parslow" Body="This is the content blah 2" Avatar="https://pbs.twimg.com/profile_images/539113272553648128/sWcgnCan_normal.jpeg" />-->
</ItemsControl>
I have added a button in and attached the entire datacontext item into the tag property of the button.
<Button Content="View Raw Data" Grid.Column="3" Grid.Row="2" HorizontalAlignment="Right" Width="105" Tag="{Binding}" Click="ButtonBase_OnClick" />
Then in the code I grab this out on button click:
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
var buttonClicked = (Button) sender;
var tag = buttonClicked.Tag;
Console.WriteLine("");
}
I have tried using a button with command, but can't get to work.
I have tried to use events from other controls and add mouse clicks on the grid, but again I cannot make this work.
Everything is currently in one xaml file and code file (I know!!)
The tweet class is below:
public class Tweet : INotifyPropertyChanged
{
public string Id { get; set; }
public string Author { get; set; }
public string Body { get; set; }
public string Avatar { get; set; }
public List<string> Tags { get; set; }
public Activity OriginalActivity { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
}
And everytime I get a new tweet I add it to the list and set the list:
ActivitiesList.ItemsSource = Tweets;
Where Tweets is an observable collection
private ObservableCollection<Tweet> _tweets = new ObservableCollection<Tweet>();
public ObservableCollection<Tweet> Tweets
{
get { return _tweets; }
}
if anyone could tell me the correct way to do this I would be eternally grateful.
EDIT* As asking for an example of how to do this properly wanted to know what I tried:
<Border.InputBindings>
<MouseBinding MouseAction="LeftClick" Command="{Binding DataContext.ShowData, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"/>
</Border.InputBindings>
I also tried this:
<Button Command="{Binding
RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}},
Path=DataContext.ShowData}" CommandParamater="{Binding}" />
But could never get anything to call the property on the tweet
public ICommand ShowData
{
get;
private set;
}
**
Another Edit: Why this no worky?
**
I have this button in the ItemsControl
<Button Content="View Raw Data" Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}, Path=DataContext.ShowDataCommand}" CommandParameter="{Binding}" />
And in the code I have the following:
public class Tweet : INotifyPropertyChanged
{
public string Id { get; set; }
public string Author { get; set; }
public string Body { get; set; }
public string Avatar { get; set; }
public List<string> Tags { get; set; }
public Activity OriginalActivity { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
RelayCommand _showData;
public ICommand ShowDataCommand
{
get
{
if (_showData == null)
{
_showData = new RelayCommand(param => this.ShowData((Tweet)param));
}
return _showData;
}
}
public void ShowData(Tweet tweet)
{
Debug.WriteLine("I AM HERE");
}
}
public class RelayCommand : ICommand
{
#region Fields
readonly Action<object> _execute;
readonly Predicate<object> _canExecute;
#endregion // Fields
#region Constructors
public RelayCommand(Action<object> execute) : this(execute, null) { }
public RelayCommand(Action<object> execute, Predicate<object> canExecute)
{
if (execute == null)
throw new ArgumentNullException("execute");
_execute = execute; _canExecute = canExecute;
}
#endregion // Constructors
#region ICommand Members
[DebuggerStepThrough]
public bool CanExecute(object parameter)
{
return _canExecute == null ? true : _canExecute(parameter);
}
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
public void Execute(object parameter) { _execute(parameter); }
#endregion // ICommand Members
}
Why does this not work?
I get no errors or messages that are saying I have anything wrong.
Can anyone help?
I am trying to build a diary app that uses hub as user interface and update the UI after saving the diary. I already implemented the INotifyPropertyChanged but it didn't work. I want the item that is added after saving to appear on the hub immediately.
public class SampleDataGroup : INotifyPropertyChanged
{
public SampleDataGroup()
{
UniqueId = string.Empty;
Title = string.Empty;
Subtitle = string.Empty;
Description = string.Empty;
ImagePath = string.Empty;
Items = new ObservableCollection<DiaryData>();
}
public string UniqueId { get; private set; }
public string Title { get; private set; }
public string Subtitle { get; private set; }
public string Description { get; private set; }
public string ImagePath { get; private set; }
private ObservableCollection<DiaryData> _items;
public ObservableCollection<DiaryData> Items { get{return _items;} private set
{
OnPropertyChanged("Items");
_items = value;
} }
public override string ToString()
{
if (this.Title != null)
{
return this.Title;
}
else
{
System.Diagnostics.Debug.WriteLine("this is null at tostring");
return null;
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
public sealed class SampleDataSource : INotifyPropertyChanged
{
private static SampleDataSource _sampleDataSource = new SampleDataSource();
private ObservableCollection<SampleDataGroup> _groups = new ObservableCollection<SampleDataGroup>();
public ObservableCollection<SampleDataGroup> Groups
{
get { return this._groups; }
set { }
}
public static async Task<IEnumerable<SampleDataGroup>> GetGroupsAsync()
{
await _sampleDataSource.GetSampleDataAsync();
return _sampleDataSource.Groups;
}
public static async Task<SampleDataGroup> GetGroupAsync(string uniqueId)
{
System.Diagnostics.Debug.WriteLine("GetGroupAsync is entered phase 1");
await _sampleDataSource.GetSampleDataAsync();
// Simple linear search is acceptable for small data sets
System.Diagnostics.Debug.WriteLine("GetGroupAsync is entered phase 2");
var matches = _sampleDataSource.Groups.Where((group) => group.UniqueId.Equals(uniqueId));
if (matches.Count() == 1) return matches.First();
return null;
}
public static async Task<DiaryData> GetItemAsync(string uniqueId)
{
await _sampleDataSource.GetSampleDataAsync();
System.Diagnostics.Debug.WriteLine("GetItemAsync is entered");
// Simple linear search is acceptable for small data sets
var matches = _sampleDataSource.Groups.SelectMany(group => group.Items).Where((item) => item.UniqueId.Equals(uniqueId));
if (matches.Count() == 1) return matches.First();
else return null;
}
private async Task GetSampleDataAsync()
{
System.Diagnostics.Debug.WriteLine("GetSampleDataAsync is entered");
//if (this._groups.Count != 0)return;
Uri dataUri = new Uri("ms-appdata:///local/data.json");
StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(dataUri);
string jsonText = await FileIO.ReadTextAsync(file);
JsonArray jsonArray = JsonArray.Parse(jsonText);
SampleDataGroup group = new SampleDataGroup();
foreach (JsonValue itemValue in jsonArray)
{
JsonObject itemObject = itemValue.GetObject();
group.Items.Add(new DiaryData(itemObject["Title"].GetString(),
itemObject["Content"].GetString(),
itemObject["Coordinate"].GetString(),
itemObject["UniqueId"].GetString(),
itemObject["ImagePath"].GetString(),
itemObject["VideoPath"].GetString()));
System.Diagnostics.Debug.WriteLine(itemObject["Title"].GetString());
}
this.Groups.Add(group);
System.Diagnostics.Debug.WriteLine("GetSampleDataAsync is finished");
}
//}
public event PropertyChangedEventHandler PropertyChanged;
}
here's my XAML File
<Page
x:Class="DiaryAppHub.HubPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DiaryAppHub"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:DiaryAppHub.Data"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
d:DataContext="{Binding Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:data.json}}"
mc:Ignorable="d">
<Page.Resources>
<DataTemplate x:Key="HubSectionHeaderTemplate">
<TextBlock Margin="0,0,0,-9.5" Text="{Binding}"/>
</DataTemplate>
<!-- Grid-appropriate item template as seen in section 2 -->
<DataTemplate x:Key="Standard200x180TileItemTemplate">
<Grid Margin="0,0,9.5,9.5" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="138.5" Width="138.5"/>
<TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="9.5,0,0,6.5" Style="{ThemeResource BaseTextBlockStyle}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="StandardTripleLineItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,9.5,0,0" Grid.Column="0" HorizontalAlignment="Left">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="79" Width="79"/>
</Border>
<StackPanel Grid.Column="1" Margin="14.5,0,0,0">
<TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}"/>
<TextBlock Text="{Binding Description}" Style="{ThemeResource ListViewItemContentTextBlockStyle}" Foreground="{ThemeResource PhoneMidBrush}" />
<TextBlock Text="{Binding Subtitle}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="StandardDoubleLineItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,9.5,0,0" Grid.Column="0" HorizontalAlignment="Left">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="79" Width="79"/>
</Border>
<StackPanel Grid.Column="1" Margin="14.5,0,0,0">
<TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}" Foreground="Black"/>
<TextBlock Text="{Binding Subtitle}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" Foreground="DimGray"/>
</StackPanel>
</Grid>
</DataTemplate>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar Background="Transparent">
<AppBarButton Icon="Add" Label="Add" Click="add_onclick"/>
<AppBarButton Icon="Add" Label="Shake it!" />
</CommandBar>
</Page.BottomAppBar>
<Grid x:Name="LayoutRoot">
<Hub x:Name="Hub" x:Uid="Hub" Header="diary app hub" Margin="0,0,0,-59" Foreground="DimGray">
<Hub.Background>
<ImageBrush ImageSource="ms-appx:/Assets/desk_paper.png" Stretch="None"/>
</Hub.Background>
<!--<HubSection x:Uid="HubSection1" Header="SECTION 1" DataContext="{Binding Groups}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<ListView
ItemsSource="{Binding}"
IsItemClickEnabled="True"
ItemClick="GroupSection_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,27.5">
<TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</HubSection>-->
<HubSection x:Uid="HubSection5" Header="Recent"
DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<ListView
AutomationProperties.AutomationId="ItemListViewSection5"
AutomationProperties.Name="Items In Group"
SelectionMode="None"
IsItemClickEnabled="True"
ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource StandardDoubleLineItemTemplate}"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
</ListView>
</DataTemplate>
</HubSection>
<HubSection x:Uid="HubSection2" Header="All notes" Width ="Auto"
DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" Height="659" >
<DataTemplate>
<GridView
Margin="0,9.5,0,0"
ItemsSource="{Binding Items}"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
ItemTemplate="{StaticResource Standard200x180TileItemTemplate}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
You need to raise the PropertyChanged event for the model's properties. The UI doesn't get notified as properties like Title,Subtitle don't raise the PropertyChanged event when they are modified. It should be like this:
private string _title;
public string Title
{
get
{
return _title;
}
set
{
if(_title!=value)
{
_title=value;
OnPropertyChanged("Title");
}
}
}
Do this similarly for other properties. Also, you don't need to raise the PropertyChanged event for an ObservableCollection as an ObservableCollection implements INotifyPropertyChanged by default.
First time using a ListBox and after following this , I'm having issues having data actually display. The ListBox is just empty and white with no text in it.
I made a separate textbox to test an individual "Tweet" object out and it is indeed outputting what I want it to. I think my issue either lies in XAML or Tweets. But nothing looks out of place.
Tracing reveals that Tweets successfully adds a proper Tweet object with what I need. But my ListBox Count is always 0.
<Grid Opacity="0.8">
<Grid.Resources>
<local:Tweets x:Key="tweets"/>
</Grid.Resources>
<Rectangle Fill="Gray" Margin="1523,0,0,729" Height="321" Width="389">
<Rectangle.Effect>
<DropShadowEffect/>
</Rectangle.Effect></Rectangle>
<ListBox ItemsSource="{StaticResource tweets}" Height="321" Margin="340,40,1096,0" x:Name="twitterBox" VerticalAlignment="Top" Width="476">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<!--<Image Source="{Binding imgSrc}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>-->
<StackPanel Width="370">
<TextBlock Text="{Binding user}" FontSize="28" />
<TextBlock Text="{Binding tweet}" TextWrapping="Wrap" FontSize="24" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
In my cs:
public class Tweet
{
public String imgSrc { get; set; }
public String user { get; set; }
public String tweet { get; set; }
public Tweet(String user, String tweet, String img)
{
this.imgSrc = img;
this.user = user;
this.tweet = tweet;
}
}
public class Tweets : ObservableCollection<Tweet>
{
public Tweets()
{
}
public void addTweet(Tweet tweet)
{
Add(tweet);
}
}
public void SomeFunction()
{
Tweets myTwitter = new Tweets();
myTwitter.addTweet(new Tweet(tweet.User.ScreenName, tweet.Text, tweet.User.ProfileImageUrl));
}
ItemTemplate code is ok but you should remove this Margin="1523,0,0,729".
ListBox is empty because items source is empty. You should add some items.
To add items in XAML you should add default constructor to Tweet class.
public class Tweet
{
public String imgSrc { get; set; }
public String user { get; set; }
public String tweet { get; set; }
public Tweet(){}
public Tweet(String user, String tweet, String img)
{
this.imgSrc = img;
this.user = user;
this.tweet = tweet;
}
}
And now you can write something like this:
...
<Grid.Resources>
<local:Tweets x:Key="tweets">
<local:Tweet imgSrc="imgSrc1" user="user1" tweet="tweet1" />
<local:Tweet imgSrc="imgSrc2" user="user2" tweet="tweet2" />
</local:Tweets>
</Grid.Resources>
...
Result:
Add items in code-behind.
To do that you should use function: FindResource (msdn).
XAML:
<Grid Name="mainGrid" Opacity="0.8">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.Resources>
<local:Tweets x:Key="tweets">
<local:Tweet imgSrc="imgSrc1" user="user1" tweet="tweet1" />
<local:Tweet imgSrc="imgSrc2" user="user2" tweet="tweet2" />
</local:Tweets>
</Grid.Resources>
<Button Content="Add new item" Click="Button_Click" />
<ListBox x:Name="twitterBox" ItemsSource="{StaticResource tweets}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<!--<Image Source="{Binding imgSrc}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>-->
<StackPanel Width="370">
<TextBlock Text="{Binding user}" FontSize="28" />
<TextBlock Text="{Binding tweet}" TextWrapping="Wrap" FontSize="24" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Code-behind:
private void Button_Click(object sender, RoutedEventArgs e)
{
var coll = mainGrid.FindResource("tweets") as Tweets;
if (coll != null)
{
coll.Add(new Tweet("user", "name", "url"));
}
}
Second solution:
The better solution will be if you will create an instance of class Tweets in code behind.
XAML:
<Grid Name="mainGrid" Opacity="0.8">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Content="Add new item" Click="Button_Click" />
<ListBox x:Name="twitterBox" ItemsSource="{Binding tweets}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<!--<Image Source="{Binding imgSrc}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>-->
<StackPanel Width="370">
<TextBlock Text="{Binding user}" FontSize="28" />
<TextBlock Text="{Binding tweet}" TextWrapping="Wrap" FontSize="24" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Code-behind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
tweets = new Tweets();
tweets.Add(new Tweet("user1", "name1", "url1"));
tweets.Add(new Tweet("user2", "name2", "url2"));
tweets.Add(new Tweet("user3", "name3", "url3"));
this.DataContext = this;
}
public Tweets tweets { get; set; }
private void Button_Click(object sender, RoutedEventArgs e)
{
tweets.Add(new Tweet("user4", "name4", "url4"));
}
}
You add tweets to a different collection than the one displayed by the listbox.