I have a texblock in my .xaml file that I have binded to a property. There are also 2 buttons to ++ and -- the value of that property when they are clicked. The problem is that the binding works only at the start of the application.
When the button is clicked the corresponding command is executed and variable changes its value in the code (so there is no problem with executing the given methods).
However no changes are visible in the UI. I am not sure what might be the cause here, is the UI being somehow blocked? I have always worked using MVVM way and never have had a problem like that with binding.
If more code is needed let me know, didn't want to put a huge wall of code here.
Constructor:
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
Zoom = 60;
ZoomPlusSceneCommand = new RelayCommand(ZoomPlus);
ZoomMinusSceneCommand = new RelayCommand(ZoomMinus);
}
Handling property changed:
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
Property itself:
private int zoom;
public int Zoom
{
get { return zoom; }
set { if (zoom != value) { zoom = value; RaisePropertyChanged("Zoom"); } }
}
Commands:
public RelayCommand ZoomPlusSceneCommand { get; set; }
public RelayCommand ZoomMinusSceneCommand { get; set; }
where RelayCommand is an implementation that I use as a template in most of my projects and they've always been working well (at least in MVVM projects)
Methods executed with the usage of commands when a button is clicked:
private void ZoomPlus(object o)
{
Zoom++;
}
private void ZoomMinus(object o)
{
Zoom--;
}
Xaml:
<Window x:Class="Rendering3D.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:Rendering3D"
Loaded="GetSceneSize"
ResizeMode="NoResize"
mc:Ignorable="d"
Title="MainWindow" Height="550" Width="900">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition x:Name="SceneColumn" Width="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition x:Name="SceneRow" Height="*"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Image x:Name="SceneImage" Grid.Column="1" Grid.Row="1"
PreviewMouseLeftButtonDown="SceneMouseLeftButtonDown"
MouseMove="SceneMouseMove"
MouseWheel="SceneMouseWheel"/>
<Grid Grid.Column="3" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Padding" Value="0 5 0 5"/>
</Style>
</Grid.Resources>
<Button Grid.Row="0" Content="+" Command="{Binding ZoomPlusSceneCommand}"/>
<Button Grid.Row="2" Content="-" Command="{Binding ZoomMinusSceneCommand}"/>
<Label Grid.Row="4" Content="Zoom" HorizontalAlignment="Center"/>
<TextBlock Grid.Row="5" Text="{Binding Zoom}" HorizontalAlignment="Center"/>
</Grid>
</Grid>
Example of a mouse event:
private void SceneMouseWheel(object sender, MouseWheelEventArgs e)
{
if (e.Delta > 0)
Zoom++;
else
Zoom--;
return;
}
Assuming the property gets set, the view should be updated provided that your MainWindow class actually implements INotifyPropertyChanged:
public partial class MainWindow : Window, INotifyPropertyChanged
...
Related
I need to display cards in a ListBox in a specific layout:
https://imgur.com/a/0U8eqTc
I've tried to find a way to use 2 types of DataTemplate but I have no idea how to do it. I decided to make a template which contains 6 card Template (like this):
https://imgur.com/VrOlYcR
Here's what my current Template looks like:
<ControlTemplate x:Key = "CardTemplate" TargetType = "Button">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="4*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Path=Image}"/>
<TextBlock Grid.Row="1" Text="{Binding Path=Titre}"/>
</Grid>
</ControlTemplate>
<DataTemplate x:Key="DataTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" Template="{StaticResource CardTemplate}"/>
<Grid Grid.Column="1" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Template="{StaticResource CardTemplate}"/>
<Button Grid.Row="1" Template="{StaticResource CardTemplate}"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Template="{StaticResource CardTemplate}"/>
<Button Grid.Row="1" Template="{StaticResource CardTemplate}"/>
</Grid>
<Button Grid.Column="1" Grid.Row="1" Template="{StaticResource CardTemplate}"/>
</Grid>
</DataTemplate>
Which I intend to display in a ListBox:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Name="ListBox" ItemTemplate="{DynamicResource DataTemplate}"
ScrollBar.Scroll="ScrollOnBottom">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
Here's how my cod behind basically works:
class Cards
{
public List<Card> cards; // list of 6 Card objects
}
class Card
{
string title;
BitmapImage image;
public string Title { get => title; set => title = value; }
public BitmapImage Image { get => image; set => image = value; }
}
ObservableCollection<Cards> cc = new ObservableCollection<Cards>();
/*
Cards are already filled with 6 Card
cc filled with Cards
*/
formationListBox.ItemsSource = cc;
Here's the problem, it displays the right amount of Cards but the buttons are empty. I don't know how to bind a specific object to each button.
To Give an example of what Sinatr commented. You should approach this from an Mvvm perspective. first you should add a View Model for the View that this Window is in. This will contain a list of objects that are DisplayCards each object will store the string and image.
public class DisplayCard : INotifyPropertyChanged
{
private string _title;
public string Title
{
get { return _title; }
set
{
if (value != _title) { _title = value; RaisePropertyChanged(); }
}
}
private string _cardImage;
public string CardImage
{
get { return _cardImage; }
set
{
if (value != _cardImage) { _cardImage = value; RaisePropertyChanged(); }
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public class YourViewVM : INotifyPropertyChanged
{
private ObservableCollection<DisplayCard> _cardCollection;
public ObservableCollection<DisplayCard> CardCollection
{
get { return _cardCollection; }
set
{
if (value != _cardCollection) { _cardCollection = value; RaisePropertyChanged(); }
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Then you need to make the list CardCollection set to the ListBox's ItemSource. Then use a datatemplate to bind the DisplayCards properties to the containing object.
<ListBox Name="lbTodoList" HorizontalContentAlignment="Stretch" ItemSource="{Binding CardCollection}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="4*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Image}"/>
<TextBlock Grid.Row="1" Text="{Binding Title}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You need to make sure you set the YourViewVM As the DataContext of the View. A simple search should solve how to do that.
The above should be enough to allow you to refactor your code such that it works.
I have a Slider in WPF and I want to bind the same slider to two different Values. But each of these values have different range. For example the first one represents time and changes between 0 to 1.5 second and the second value represent percentage that ranges from 0 to 100. Is it possible to bind the value of the Slider to both of them in a way that user can also type any value within the range and both slider and other value get updated. For example if the user put the time value to 1, the Slider should move and also the value of the percentage should be set to 66.66 %.
Thanks in advance
Your solution might be something like this:
MainWindow.xaml
<Window x:Class="WpfApp1.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:wpfApp1="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
d:DataContext="{d:DesignInstance d:Type=wpfApp1:SampleViewModel}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="0-1.5" Grid.Column="0" Grid.Row="0"/>
<TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Value1, Mode=TwoWay}"/>
<TextBlock Text="0-100" Grid.Column="0" Grid.Row="1"/>
<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Value2, Mode=TwoWay}"/>
<Slider Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" Height="25" Minimum="0" Maximum="100" Value="{Binding Value2}"/>
</Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
namespace WpfApp1
{
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
DataContext = new SampleViewModel();
}
}
public sealed class SampleViewModel : INotifyPropertyChanged
{
private double _value1;
private double _value2;
public event PropertyChangedEventHandler PropertyChanged;
public double Value1
{
get { return _value1; }
set
{
if (_value1 == value)
return;
_value1 = value;
OnPropertyChanged(nameof(Value1));
_value2 = Math.Round(100 / 1.5 * value, 1);
OnPropertyChanged(nameof(Value2));
}
}
public double Value2
{
get { return _value2; }
set
{
if (_value2 == value)
return;
_value2 = value;
OnPropertyChanged(nameof(Value2));
_value1 = Math.Round(1.5 /100* value, 1);
OnPropertyChanged(nameof(Value1));
}
}
private void OnPropertyChanged(string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
However its for a 'well-known' min/max values. If you need dynamic ones (you dont know min/max on compile time, and it would be the only right solution to avoid any hardcoded stuff) you need to do some math.
Also you can achieve the same result using multibinding, just pass min/max and values and do all the math inside.
I have a list of buildings. Buildings have their own class (core), and are saved in an ObservableCollection. Building are displayed in the list, but when I change a variable which is visible in the list, that variable doesn't change in xaml.
Here is the source of class:
public class core
{
// core ----------------------------------------------
static public ObservableCollection<core> cores { get; set; } = new ObservableCollection<core>();
string namef = "building";
public core()
{
cores.Add(this);
}
public string Namef
{
get { return namef; }
set { namef = value; }
}
}
In wpf - xaml:
<Page x:Class="idle.pages.game"
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:idle.pages"
mc:Ignorable="d"
d:DesignHeight="454.259" d:DesignWidth="757.012"
Title="game">
<Grid Margin="0" x:Name="gridx">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TabControl x:Name="tabControl">
<TabItem Header="Budovy">
<Grid Background="#FFE5E5E5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ListBox x:Name="listBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="10,7" HorizontalAlignment="Stretch" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" CornerRadius="2"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Namef}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Frame x:Name="frame" Content="Frame" Grid.Column="1" NavigationUIVisibility="Hidden" Source="/idle;component/pages/Building.xaml"/>
</Grid>
</TabItem>
</TabControl>
</Grid>
and in wpf - c#:
public partial class game : Page
{
public game()
{
InitializeComponent();
new core() { Namef = "b1"};
new core() { Namef = "b2"};
new core() { Namef = "b3"};
core.start(this);
listBox.ItemsSource = xxx;
}
public ObservableCollection<core> xxx { get; set; }
}
Im sure, that the variable inside of the class is being changed, but xaml not. What's wrong?
You need to implement the INotifyPropertyChanged interface and invoke the PropertyChanged event in the setters of all properties that can change (and you want to have updated in the UI). If for example you want to see changes to Namef, you'd have to implement it like this:
public class core : INotifyPropertyChanged
{
static public ObservableCollection<core> cores { get; set; }
= new ObservableCollection<core>();
string namef = "building";
public core()
{
cores.Add(this);
}
public string Namef
{
get { return namef; }
set
{
if(namef == value) return;
namef = value;
OnPropertyChanged("Namef");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(String propertyName)
{
if (PropertyChanged == null) return;
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
I'm doing simple checkers game in C# and WPF. The problem i am facing has to do with displaying properly the content. I've got a board, i can put pawns wherever I want on it, but unfortunately I cannot make any figure move (My vision is that player clicks on Pawn/Queen - the figure is now movable with cursor - then he puts it on right spot). I tried removing Image from parent and adding to different grid and some other ideas - however I failed.
<Window x:Class="Checkers.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Checkers"
Title="Checkers" WindowStyle="ThreeDBorderWindow" MinWidth="800" MinHeight="680" Width="800" Height="680" Icon="C:\Users\NAME\Documents\Visual Studio 2012\Projects\Checkers\Checkers\Resources\package_games_board.ico" WindowStartupLocation="CenterScreen" >
<Window.Resources>
<DataTemplate DataType="{x:Type local:Pawn}">
<Image Source="{Binding ImageSource}" MouseDown="ItemsControl_MouseDown_1" MouseMove="helo_MouseMove_1" Name="helo" Tag="{Binding Reference}"/>
</DataTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot" Background="MidnightBlue">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="600"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Menu Grid.Row="0" Grid.Column="1" Height="18" VerticalAlignment="Top" Margin="0,0,0,0"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="600" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<UniformGrid Grid.Column="1" x:Name="CheckersBoard" Rows="8" Columns="8" SnapsToDevicePixels="False"/>
<ItemsControl Grid.Column="1" ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate x:Name="GridBoard">
<Grid IsItemsHost="True">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Grid.Row" Value="{Binding Row}"/>
<Setter Property="Grid.Column" Value="{Binding Column}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
</Grid>
Then I have class of Pawn:
public class Pawn : INotifyPropertyChanged
{
public bool IsBlack { get; set; }
public Pawn Reference { get; set; }
private int _row;
public Pawn()
{
Reference = this;
}
public int Row
{
get { return _row; }
set
{
_row = value;
OnPropertyChanged("Row");
}
}
private int _column;
public int Column
{
get { return _column; }
set
{
_column = value;
OnPropertyChanged("Column");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
public string ImageSource
{
get { return "C:\\Users\\NAME\\Documents\\Visual Studio 2012\\Projects\\Checkers\\Checkers\\Resources\\" + (IsBlack ? "black" : "white") + "_transparent.png"; }
}
}
And the main code (rest is not the case):
public partial class MainWindow : Window
{
private ObservableCollection<Pawn> Pawns;
private void ShowBoard()
{
SolidColorBrush scb_white = (SolidColorBrush)(new BrushConverter().ConvertFrom("#8080FF"));
SolidColorBrush scb_dark = (SolidColorBrush)(new BrushConverter().ConvertFrom("#004A95"));
for (int i = 0; i < 64; i++)
CheckersBoard.Children.Add(new Rectangle() { Name = "field"+i, Stroke=Brushes.Black, Fill = (i + 1 + i / 8) % 2 == 0 ? scb_white : scb_dark });
Pawns.Add(new Pawn() { Row = 0, Column = 0, IsBlack = true });
Pawns.Add(new Pawn() { Row = 0, Column = 2, IsBlack = false });
Pawns.Add(new Pawn() { Row = 0, Column = 4, IsBlack = true });
}
public MainWindow()
{
Pawns = new ObservableCollection<Pawn>();
InitializeComponent();
DataContext = Pawns;
ShowBoard();
}
Mouse handlers ...
Does someone know the solution?
For the code you have, just setting Row/Column on the Pawn object appears like it would perform the "movement" you want. Check the output window for binding exceptions if it isn't working.
That being said, that will just make them all jump around. For true movement you will need to write Storyboards (likely in code-behind) and move their positions around. The best way to do that is via TranslateTransform.
Update
Doing drag and drop in this kind of system is going to be very difficult and not terribly efficient. You may want to look at this question/answer: Dragging a WPF user control
Lately ive been trying to make a grid that uses my UserControls to fill it in.
The only problem i've encountered is that I cant use the WPF Binding stuff to link the user controls to my grid, making it for me very hard to nicely place them in the grid.
My question: How can i bind the attributes in my ViewModel (which are stored in the Block class, which my ViewModel has an object of), to my UserControl Block, allowing it to use those variables (the X and Y, which are the row and column of the grid, position)?
Here is the code of my user control:
namespace Mortal_Pets.Views
public partial class BlockView : UserControl
{
public BlockView()
{
InitializeComponent();
DataContext = new BlockViewModel();
}
}
<UserControl x:Class="Mortal_Pets.Views.BlockView"
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:DesignHeight="30" d:DesignWidth="30">
<Canvas Background="{Binding Block.Color}" Grid.Row="{Binding Path=Block.XPosition}" Grid.Column="{Binding Path=Block.YPosition}">
</Canvas>
Here is the ViewModel and Model class of the UserControl:
class BlockViewModel
{
public Block Block { get; set; }
public BlockViewModel()
{
Block = new Block();
Block.XPosition = 5; //Does Not Work, But this is how i'd like to have it
Block.YPosition = 5; //Does Not Work, But this is how i'd like to have it
Block.Color = new SolidColorBrush(Colors.Black);
}
}
class Block
{
public int XPosition { get; set; }
public int YPosition { get; set; }
public Brush Color { get; set; }
public Block()
{
}
}
Then following up we have my Window:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainViewModel();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
BlockView view = new BlockView();
view.SetValue(Grid.ColumnProperty, 5); //This does work, but is ugly and not really usefull for what i intend to do with it
view.SetValue(Grid.RowProperty, 5); //This does work, but is ugly and not really usefull for what i intend to do with it
BoardGrid.Children.Add(view); //This does work, but is ugly and not really usefull for what i intend to do with it
}
}
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Mortal_Pets.Views" x:Class="Mortal_Pets.Views.MainWindow"
Title="MainWindow" Height="700" Width="600"
Loaded="Window_Loaded">
<Grid x:Name="BoardGrid" Margin="10,50,10,10" Width="500" Height="500">
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Label x:Name="ComboCounter" Content="{Binding Game.ComboCounter}" HorizontalAlignment="Left" Margin="-2,-61,0,0" VerticalAlignment="Top" Width="95" Grid.ColumnSpan="4"/>
</Grid>
Thanks in advance,
Nick van der Meij
Got it to work based on knowledge found here and here. It is not pretty but this seems to be the only way it will work.
You did not share the MainViewModel (I guess because it was not necessary for the quick sample you gave). But since I needed it for binding and you will most probably work with it, here is my quick version:
class MainViewModel
{
public List<BlockViewModel> Blocks { get; set; }
public MainViewModel()
{
Blocks = new List<BlockViewModel> { new BlockViewModel() };
}
}
You need to wrap the grid in an ItemsControl and use the ItemContainerStyle for binding the Grid.Column and Grid.Row:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="700" Width="600"
xmlns:local="clr-namespace:WpfApplication1">
<ItemsControl ItemsSource="{Binding Path=Blocks}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Block.YPosition}" />
<Setter Property="Grid.Column" Value="{Binding Block.XPosition}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:BlockView/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid Margin="10,50,10,10" Width="500" Height="500" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Window>
The BlockView now looks like this:
<UserControl x:Class="WpfApplication1.BlockView"
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:DesignHeight="30" d:DesignWidth="30">
<Canvas Background="{Binding Block.Color}">
</Canvas>
</UserControl>