My project is for WP8.1 and i'm using Silverlight.
In this project, I have two rectangles, a blue and a red one. I want each one to take 50% of the screen width so i made this :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Blue" Visibility="{Binding BlueRectVisibility}" />
<Rectangle Grid.Column="1" Fill="Red" Visibility="{Binding RedRectVisibility}"/>
</Grid>
Sometime, one of this rectangles can have his visibility set to Collapsed by binding. What i want then is the other one to take all the width.
With that Xaml, the visible rectangle just take half of the screen.
Changing the ColumnDefinitions to Auto does not work because the Grid does not take 100% of the screen width anymore.
Can you please explain how to make a "dynamic" UI doing that ?
The reason that Auto doesn't work is because the layout goes something like this:
Page: Hey Grid, how big do you want to be?
Grid: Dunno, lemme ask ColumnDefinition. How big do you wanna be?
ColumnDefinition: Gee, I'm not sure; I need to ask Rectangle. Hey Rectangle, how much space do you need?
Rectange: Eh, I don't really care.
ColumnDefinition: Zero it is then!
And so on back up the chain
So you end up with a zero-width column. The solution is to bind the widths dynamically. #Tam Bui has the right approach, but here is a simplified version for Windows Phone 8.1:
XAML
<StackPanel>
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding FirstColumnWidth}" />
<ColumnDefinition Width="{Binding SecondColumnWidth}"/>
</Grid.ColumnDefinitions>
<Rectangle VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" Fill="Blue" />
<Rectangle VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" Fill="Red" Grid.Column="1"/>
</Grid>
<Button Content="toggle column width" Click="ToggleColWidth"/>
</StackPanel>
Code
public partial class MainPage : PhoneApplicationPage, INotifyPropertyChanged
{
GridLength firstWidth;
GridLength secondWidth;
public MainPage()
{
firstWidth = secondWidth = new GridLength(1, GridUnitType.Star);
DataContext = this;
InitializeComponent();
}
void RaisePropertyChanged([CallerMemberName] string name = "")
{
var handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(name));
}
public event PropertyChangedEventHandler PropertyChanged;
public GridLength FirstColumnWidth
{
get { return firstWidth; }
set { firstWidth = value; RaisePropertyChanged(); }
}
public GridLength SecondColumnWidth
{
get { return secondWidth; }
set { secondWidth = value; RaisePropertyChanged(); }
}
private void ToggleColWidth(object sender, RoutedEventArgs e)
{
if (FirstColumnWidth.GridUnitType == GridUnitType.Star)
{
FirstColumnWidth = new GridLength(0, GridUnitType.Pixel);
SecondColumnWidth = new GridLength(1, GridUnitType.Star);
}
else
{
FirstColumnWidth = SecondColumnWidth = new GridLength(1, GridUnitType.Star);
}
}
}
With this approach, you don't even need to change the Visibility of the rectangle.
I think the root of the problem is that you are defining the Grid's Columns to be 50%, so once that's established, then changing the visibility of the Rectangle will not make any difference. I made this small POC using WPF (not sure if all of the commands translate to Silverlight, but you can try it). Basically I focus on messing with the Column's width instead of the Rectangle visibility.
In your xaml file:
<Window x:Class="CollapsibleRegion.MainWindow"
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:CollapsibleRegion"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.InputBindings>
<KeyBinding Modifiers="Ctrl" Key="B" Command="{Binding ToggleWidthCommand}" CommandParameter="Blue"/>
<KeyBinding Modifiers="Ctrl" Key="R" Command="{Binding ToggleWidthCommand}" CommandParameter="Red"/>
</Window.InputBindings>
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="blueColumn" Width="{Binding BlueColumnWidth}" />
<ColumnDefinition x:Name="redColumn" Width="{Binding RedColumnWidth}" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Blue" />
<Rectangle Grid.Column="1" Fill="Red" />
</Grid>
</Grid>
</Window>
In your code-behind (xaml.cs):
public partial class MainWindow : Window, INotifyPropertyChanged
{
private GridLength blueColumnWidth;
private GridLength redColumnWidth;
private ToggleWidthCommand toggleWidthCommand;
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
this.BlueColumnWidth = new GridLength(5, GridUnitType.Star);
this.RedColumnWidth = new GridLength(5, GridUnitType.Star);
}
public event PropertyChangedEventHandler PropertyChanged;
public GridLength BlueColumnWidth
{
get
{
return this.blueColumnWidth;
}
set
{
this.blueColumnWidth = value; OnPropertyChanged();
}
}
public GridLength RedColumnWidth
{
get
{
return this.redColumnWidth;
}
set
{
this.redColumnWidth = value; OnPropertyChanged();
}
}
public ToggleWidthCommand ToggleWidthCommand
{
get
{
if (this.toggleWidthCommand == null)
{
this.toggleWidthCommand = new ToggleWidthCommand(this);
}
return this.toggleWidthCommand;
}
}
private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
And finally, for the ToggleWidthCommand.cs, add this:
public class ToggleWidthCommand : ICommand
{
private MainWindow parent;
public ToggleWidthCommand(MainWindow parent)
{
this.parent = parent;
}
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
var blueOrRed = (string)parameter;
if (blueOrRed == "Blue")
{
if (this.parent.BlueColumnWidth.Value == 0)
this.parent.BlueColumnWidth = new System.Windows.GridLength(5, System.Windows.GridUnitType.Star);
else
this.parent.BlueColumnWidth = new System.Windows.GridLength(0, System.Windows.GridUnitType.Pixel);
}
if (blueOrRed == "Red")
{
if (this.parent.RedColumnWidth.Value == 0)
this.parent.RedColumnWidth = new System.Windows.GridLength(5, System.Windows.GridUnitType.Star);
else
this.parent.RedColumnWidth = new System.Windows.GridLength(0, System.Windows.GridUnitType.Pixel);
}
}
}
This was just a proof-of-concept, so obviously there are more efficient/cleaner/expandable ways to implement this behavior, but I was just trying to whip up a response quickly to show you how it can be done. Hope it works for you!
Related
I searched in this forum but I was unable to find a solution for my specific scenario.
I`m trying to understand WPF and MVVM and I build a simple WPF for this.
My Data Model is (I Implemented INotifyPropertyChanged here and the constructor initializes all properties):
namespace MyApp.ui.Models
{
public class Server : INotifyPropertyChanged
{
private int id;
public int ID
{
get { return id; }
set { id = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; OnPropertyChanged(Name); }
}
private string ipAddress;
public string IPAddress
{
get { return ipAddress; }
set { ipAddress = value; OnPropertyChanged(IPAddress); }
}
public Server(int ServerID, string ServerName, string ServerIpAddress)
{
ID = ServerID;
Name = ServerName;
IPAddress = ServerIpAddress;
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if(handler != null)
{
handler(this, new PropertyChangedEventArgs( propertyName ) );
}
}
}
}
My ViewModel (used by WPF Code Behind):
namespace MyApp.ui.ViewModels
{
public class ServersViewModel
{
private ObservableCollection<Server> server;
public ObservableCollection<Server> Servers
{
get { return server; }
set { server = value; }
}
public ServersViewModel()
{
Servers = new ObservableCollection<Server>
{
new Server(001, "Server001", #"192.168.254.3"),
new Server(002, "Server002", #"100.92.0.200"),
new Server(003, "Server003", #"64.32.0.3"),
new Server(004, "Server004", #"172.10.0.4"),
new Server(005, "Server005", #"165.23.0.233"),
new Server(006, "Server006", #"81.22.22.6"),
new Server(007, "Server007", #"10.10.0.7")
};
}
public void ChangeServerNames()
{
//Before Change
foreach (var item in Servers)
{
MessageBox.Show(item.Name);
}
int count = 1000;
foreach (var item in Servers)
{
item.Name = "Server" + count.ToString();
count += 1000;
}
//After Change
foreach (var item in Servers)
{
MessageBox.Show(item.Name);
}
}
}
}
My WPF Main View (Main Menu) loads a Custom user control (ExplorerView) with the following XAML code (Contains a listbox and each listbox item contains 1 checkbox + image + textblock)
<UserControl x:Class="MyApp.ui.Views.ExplorerView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MyApp.ui.Views"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="200">
<Grid>
<ListBox ItemsSource="{Binding Servers}" Margin="2">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox VerticalContentAlignment="Center" Margin="4">
<StackPanel Orientation="Horizontal">
<Image Source="/resources/server64.png" Height="30" Margin="4"></Image>
<TextBlock Text="{Binding Name}"
VerticalAlignment="Center" Margin="4"></TextBlock>
</StackPanel>
</CheckBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
Finally the MainView Code Behind loads the ServersViewModel so the ExplorerView Control can Bind the data.
namespace MyApp.ui
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public ServersViewModel context { get; set; }
public MainWindow()
{
InitializeComponent();
context = new ServersViewModel();
DataContext = context;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
context.ChangeServerNames();
}
}
}
That said, I have 2 Questions:
1) As you can see, in the MainView I implemented a Button click event that calls into ServersViewModel.ChangeServerNames() Method. The problem is that my TextBlock in ExplorerView Control does not show the updated data.
I ChangeServerNames() I also use a MessageBox to show the Values Before and After the change, and I see that the values are changing, not sure why the ListBox/TextBlock is not updating...!!! (I already tested many other possible solutions, but I can`t get it working...)
2) I read that the CodeBehind in MainView (and all other views) should only contain the InitializeComponent(); and "DataContext = context;" at Maximum...
If that is true, where the Events for button clicks and others should be placed?
Finally the code for the MainWindow XAML:
<Window
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:MyApp.ui"
xmlns:Views="clr-namespace:MyApp.ui.Views"
x:Class="MyApp.ui.MainWindow"
mc:Ignorable="d"
Title="Server" MinHeight="720" MinWidth="1024"
Height ="720" Width="1024">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="41*"/>
<RowDefinition Height="608*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Background="Gray"
ShowsPreview="True"
Width="4" Margin="0,2,0,4"
/>
<Views:MenuView Grid.ColumnSpan="3"/>
<Views:FooterView Grid.Row="2" Grid.ColumnSpan="3" />
<Views:ExplorerView Grid.Column="0" Grid.Row="1" />
<!--Temp Tests-->
<StackPanel Margin="12" Grid.Column="3" Grid.Row="1" Width="Auto" Height="Auto" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left">
<Button Margin="4" Width="120" Height="30" Content="Change Data Test..." Click="Button_Click" />
</StackPanel>
</Grid>
</Window>
Thank you for your time...
Ok, I found the problem...
Instead of
set { name = value; OnPropertyChanged(Name); }
set { ipAddress = value; OnPropertyChanged(IPAddress); }
I was missing the Quotesfor the String argument on method call
The correct form is
set { name = value; OnPropertyChanged("Name"); }
set { ipAddress = value; OnPropertyChanged("IPAddress"); }
Weird that the compiler didn`t throw any error.... The Method
private void OnPropertyChanged(string propertyName)
Is "Asking" for a string as input arg.
AnyWay the best to avoid these errors (that I found) is to write the event like this (The caller supplies it`s own Public Name):
private void OnPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Now I can do
set { name = value; OnPropertyChanged(); }
set { ipAddress = value; OnPropertyChanged(); }
Thank you.
I need to change the columnDefinition's width and the rowDefinition's Height during the program, so binding seems a good option to me.
I try to bind the ColumnDefinition's width and the RowDefinition's Height of the Grid to a property that is an Object "StrategyObject".
For the demo, we try to change the column's and row's sizes of the following grid (see Screenshots).
I use the strategy Pattern with the abstract Class "BaseStrategyObject" :
public abstract class BaseStrategyObject
{
protected GridLength gridFirstRowHeight;
public GridLength GridFirstRowHeight
{
get { return this.gridFirstRowHeight; }
}
protected GridLength gridSecondRowHeight;
public GridLength GridSecondRowHeight
{
get { return this.gridSecondRowHeight; }
}
protected GridLength gridFirstColumnWidth;
public GridLength GridFirstColumnWidth
{
get { return this.gridFirstColumnWidth; }
}
protected GridLength gridSecondColumnWidth;
public GridLength GridSecondColumnWidth
{
get { return this.gridSecondColumnWidth; }
}
}
and here are the three concrete startegy classes :
public class Strategy1Object : BaseStrategyObject
{
public Strategy1Object()
{
this.gridFirstColumnWidth = new GridLength(1, GridUnitType.Star);
this.gridFirstRowHeight = new GridLength(1, GridUnitType.Star);
this.gridSecondColumnWidth = new GridLength(1, GridUnitType.Star);
this.gridSecondRowHeight = new GridLength(1, GridUnitType.Star);
}
}
public class Strategy2Object : BaseStrategyObject
{
public Strategy2Object()
{
this.gridFirstColumnWidth = new GridLength(80, GridUnitType.Star);
this.gridFirstRowHeight = new GridLength(1, GridUnitType.Star);
this.gridSecondColumnWidth = new GridLength(20, GridUnitType.Star);
this.gridSecondRowHeight = new GridLength(1, GridUnitType.Star);
}
}
public class Strategy3Object : BaseStrategyObject
{
public Strategy3Object()
{
this.gridFirstColumnWidth = new GridLength(80.0, GridUnitType.Pixel);
this.gridFirstRowHeight = new GridLength(200.0, GridUnitType.Pixel);
this.gridSecondColumnWidth = new GridLength(200.0, GridUnitType.Pixel);
this.gridSecondRowHeight = new GridLength(80.0, GridUnitType.Pixel);
}
}
The Xaml code of the window :
<Window x:Class="GridAsteriskBindingtest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" DataContext="{Binding RelativeSource={RelativeSource Self}}">
<DockPanel>
<StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Center" Orientation="Horizontal">
<Button Click="Strategy1_Click">Strategy1</Button>
<Button Click="Strategy2_Click">Strategy2</Button>
<Button Click="Strategy3_Click">Strategy3</Button>
</StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding Mode=OneWay, Path=StrategyObject.GridFirstRowHeight}"/>
<RowDefinition Height="{Binding Mode=OneWay, Path=StrategyObject.GridSecondRowHeight}"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Mode=OneWay, Path=StrategyObject.GridFirstColumnWidth}"/>
<ColumnDefinition Width="{Binding Mode=OneWay, Path=StrategyObject.GridFirstColumnWidth}"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0"
Fill="Red"/>
<Rectangle Grid.Row="0" Grid.Column="1"
Fill="Yellow"/>
<Rectangle Grid.Row="1" Grid.Column="0"
Fill="Blue"/>
<Rectangle Grid.Row="1" Grid.Column="1"
Fill="Green"/>
</Grid>
</DockPanel>
and the .cs of the window :
public partial class MainWindow : Window , INotifyPropertyChanged
{
private BaseStrategyObject strategyObject;
public BaseStrategyObject StrategyObject
{
get { return this.strategyObject; }
set
{
this.strategyObject = value;
OnStrategyObjectChanged();
}
}
public MainWindow()
{
this.strategyObject = new Strategy1Object();
InitializeComponent();
}
private void Strategy1_Click(object sender, RoutedEventArgs e)
{
this.StrategyObject = new Strategy1Object();
}
private void Strategy2_Click(object sender, RoutedEventArgs e)
{
this.StrategyObject = new Strategy2Object();
}
private void Strategy3_Click(object sender, RoutedEventArgs e)
{
this.StrategyObject = new Strategy3Object();
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
private void OnStrategyObjectChanged()
{
if(this.PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("StrategyObject"));
}
#endregion
}
Clicking on the buttons apply a new object to the "StrategyObject" property.
When we launch the program, the Strategy3 (with specific sizes GridUnit.Pixel) works fine, but it doesn't work with the two other strategies ( Strategy 1 and 2 (the number of stars is not taken into account :-( )).
Here are the ScreenShots ( Strategy 1 and 2 give the same result).
Strategy 1 & 2 Screenshot
Strategy 3 Screenshot
Am I doing something wrong ? Thanks !
How could I make possible to access data/properties from a UserControl and the parent, MainWindow (and viceversa)? For example, say I have a TextBox in my MainWindow called mainTextBox. Then I create a UserControl with another TextBox called ucTextBox. I also have a button called ucButton in the UserControl that should popup a MessageBox with the product of the values mainTextBox.Text * ucTextBox.Text (converted to double, to make it work).
What I really want to know is how to achieve to do this dynamically, with a button that allows to create more UserControls that are capable to interact with the parent. In this case it makes no sense to name every UserControl.
I've tried several things, mainly with get,set properties but with no desired outcome.
I'm not sure if I need to use UserControl, but it seems to, I've read that CustomControl is for a deep customization but I don't need that.
Here is just a quick sample to get you started (and what probably was meant by mr. #Adriano):
RootViewModel.cs:
public class RootViewModel :INotifyPropertyChanged
{
#region Implementation of INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged = delegate {};
private void OnPropertyChanged(string propertyName)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
private double _x;
private double _y;
public double X
{
get { return _x; }
set
{
_x = value;
OnPropertyChanged("X");
}
}
public double Y
{
get { return _y; }
set
{
_y = value;
OnPropertyChanged("Y");
}
}
public double XY
{
get { return _x * _y; }
}
}
UserControl1.xaml:
<UserControl x:Class="WpfApplication2.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignWidth="200">
<Grid>
<GroupBox Header="User Control">
<StackPanel>
<Label Content="Y:" />
<TextBox Text="{Binding Path=Y, UpdateSourceTrigger=PropertyChanged, FallbackValue=1}" Margin="5" />
<Button Content="Press me" Click="OnButtonClick" />
</StackPanel>
</GroupBox>
</Grid>
UserControl1.xaml.cs:
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}
private void OnButtonClick(object sender, RoutedEventArgs e)
{
var viewModel = (RootViewModel)DataContext;
var resultMessage = string.Format("{0} * {1} = {2}", viewModel.X, viewModel.Y, viewModel.XY);
MessageBox.Show(resultMessage, "X * Y");
}
}
MainWindow.xaml:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WpfApplication21="clr-namespace:WpfApplication2"
Title="Main Window" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel>
<Label Content="X:" />
<TextBox Text="{Binding Path=X, UpdateSourceTrigger=PropertyChanged, FallbackValue=1}" Margin="5" Height="24" />
</StackPanel>
<WpfApplication21:UserControl1 Grid.Row="1" Margin="5" />
</Grid>
MainWindow.xaml.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new RootViewModel
{
X = 5,
Y = 7
};
}
}
I can get this working with an XmlDataSource but not with my own classes. All I want to do is bind the listbox to my collection instance and then link the textbox to the listbox so I can edit the person's name (two-way). I've deliberately kept this as simple as possible in the hope that somebody can fill in the blanks.
XAML:
<Window x:Class="WpfListTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfListTest"
Title="Window1" Height="300" Width="600">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0">
<ListBox />
</DockPanel>
<DockPanel Grid.Column="2">
<StackPanel>
<Label>Name</Label>
<TextBox />
</StackPanel>
</DockPanel>
</Grid>
</Window>
C# code behind:
namespace WpfListTest
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public People MyPeeps = new People();
public Window1()
{
InitializeComponent();
MyPeeps.Add(new Person("Fred"));
MyPeeps.Add(new Person("Jack"));
MyPeeps.Add(new Person("Jill"));
}
}
public class Person
{
public string Name { get; set; }
public Person(string newName)
{
Name = newName;
}
}
public class People : List<Person>
{
}
}
All the examples on the web seem to have what is effectively a static class returning code-defined data (like return new Person("blah blah")) rather than my own instance of a collection - in this case MyPeeps. Or maybe I'm not uttering the right search incantation.
One day I might make a sudden breakthrough of understanding this binding stuff but at the moment it's baffling me. Any help appreciated.
The correct way would be to use the MVVM pattern and create a ViewModel like so:
public class MainWindowViewModel : INotifyPropertyChanged
{
private People _myPeeps;
private Person _selectedPerson;
public event PropertyChangedEventHandler PropertyChanged;
public People MyPeeps
{
get { return _myPeeps; }
set
{
if (_myPeeps == value)
{
return;
}
_myPeeps = value;
RaisePropertyChanged("MyPeeps");
}
}
public Person SelectedPerson
{
get { return _selectedPerson; }
set
{
if (_selectedPerson == value)
{
return;
}
_selectedPerson = value;
RaisePropertyChanged("SelectedPerson");
}
}
private void RaisePropertyChanged(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Initialize it in your View's code behind like so:
public partial class MainWindow : Window
{
private readonly MainWindowViewModel _viewModel;
public MainWindow()
{
_viewModel = new MainWindowViewModel();
_viewModel.MyPeeps = new People();
_viewModel.MyPeeps.Add(new Person("Fred"));
_viewModel.MyPeeps.Add(new Person("Jack"));
_viewModel.MyPeeps.Add(new Person("Jill"));
DataContext = _viewModel;
InitializeComponent();
}
}
And bind the data like so:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="350"
Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" />
<ColumnDefinition Width="3" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0">
<ListBox SelectedItem="{Binding SelectedPerson}"
DisplayMemberPath="Name"
ItemsSource="{Binding MyPeeps}" />
</DockPanel>
<DockPanel Grid.Column="2">
<StackPanel>
<Label>Name</Label>
<TextBox Text="{Binding SelectedPerson.Name}" />
</StackPanel>
</DockPanel>
</Grid>
</Window>
The binding will work like this:
The DataContext of the window itself is set to the ViewModel instance. Because the ListBox and the TextBox don't specify any DataContext, they inherit it from the Window. The bindings on an object always work relative to the DataContext if nothing else is being specified. That means that the TextBox binding looks for a property SelectedPerson in its DataContext (i.e., in the MainWindowViewModel) and for a Property Name in that SelectedPerson.
The basic mechanics of this sample are as follows:
The SelectedPerson property on the ViewModel is always synchronized with the SelectedItem of the ListBox and the Text property of the TextBox is always synchronized with the Name property of the SelectedPerson.
Try to inherit your People class from ObservableCollection<Person>
In the following Silverlight application why does the property OuterPadding not change the padding in the outer border, although the TextBlock correctly displays the value of OuterPadding? If I change the Border padding to a simple integer it the padding works fine, but not when it is defined by the property in code behind.
This same code works fine in WPF.
XAML:
<UserControl x:Class="Test222.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:pages="clr-namespace:Test222.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Width="600" Height="480">
<Border Background="#eee" Padding="{Binding OuterPadding}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="34"/>
<RowDefinition Height="426"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0">
<StackPanel x:Name="QuickMenu" Orientation="Horizontal"/>
</StackPanel>
<Border Grid.Row="1" Grid.Column="0"
Background="#fff"
Padding="10"
Width="580"
Height="426"
VerticalAlignment="Top"
CornerRadius="5">
<TextBlock Text="{Binding OuterPadding}"/>
</Border>
</Grid>
</Border>
</UserControl>
Code Behind:
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
namespace Test222
{
public partial class MainPage : UserControl, INotifyPropertyChanged
{
#region ViewModelProperty: OuterPadding
private int _outerPadding;
public int OuterPadding
{
get
{
return _outerPadding;
}
set
{
_outerPadding = value;
OnPropertyChanged("OuterPadding");
}
}
#endregion
public MainPage()
{
InitializeComponent();
DataContext = this;
RefreshApplication();
}
void RefreshApplication()
{
OuterPadding = 5;
for (int i = 0; i < 5; i++)
{
var button = new Button();
button.Content = "Button " + i;
button.Margin = new Thickness { Right = 3 };
QuickMenu.Children.Add(button);
}
}
#region INotifyPropertyChanged Member
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
}
}
An int works when defining the value in xaml, but when you do it in code it doesn't. But if you change your property from an int to a ThickNess it works fine.
If I had to guess I'd say its because the value converter for Thickness does not handle Int32 -> Thickness conversion. What happens if you make OuterPadding a Thickness instead of int?
EDIT Just checked Reflector and it seems ThicknessConverter is hard coded to handle conversion from either String or Double to Thickness, but not Int32.
I misunderstood what I saw in Reflector. It looks like it should handle Int32 ok.