xaml collections syncing / designer support

xaml collections syncing / designer support - c#

If I have this:
<Grid xmlns:local="clr-namespace:xaml_collections">
<StackPanel>
<StackPanel.DataContext>
<local:AComposite>
<local:AComposite.TheChildren>
<Rectangle
Height="85"
Width="85"
Fill="Red"
x:Name="foobar"
/>
</local:AComposite.TheChildren>
</local:AComposite>
</StackPanel.DataContext>
<TextBlock DataContext="{Binding TheChildren[0]}">
<Run Text="{Binding Height}"></Run>
</TextBlock>
<TextBlock DataContext="{Binding ChildrenByName[foobar]}">
<Run Text="{Binding Height}"></Run>
</TextBlock>
</StackPanel>
</Grid>
and this:
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Shapes;
using System.Collections.Specialized;
namespace xaml_collections
{
public class AComposite : FrameworkElement
{
public AComposite()
{
if (_TheChildren != null && _TheChildren is ObservableCollection<Rectangle>)
{
((ObservableCollection<Rectangle>)_TheChildren)
.CollectionChanged += AComposite_CollectionChanged;
}
}
void AComposite_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (e != null && e.Action == NotifyCollectionChangedAction.Add && e.NewItems != null)
{
foreach (var anItem in e.NewItems)
{
if (anItem is FrameworkElement)
{
FrameworkElement theFrameworkElementItem = (FrameworkElement)anItem;
_ChildrenByName.Add(theFrameworkElementItem.Name, theFrameworkElementItem);
}
}
}
}
private Dictionary<String,FrameworkElement> _ChildrenByName = new Dictionary<String,FrameworkElement>();
public Dictionary<String,FrameworkElement> ChildrenByName
{
get
{
return _ChildrenByName;
}
private set { }
}
private IList _TheChildren = new ObservableCollection<Rectangle>();
public IList TheChildren
{
get
{
return _TheChildren;
}
private set { }
}
}
}
I can see the value of Height which is 85 in the TextBlock for the TextBlock bound to Children[0] at design time. But I can only see the value of ChildrenByName[foobar]. Height at run time. Is there any way to keep these collections synchronized during design time as well?
EDIT
This seems to work and thanks to Nick Miller. The lesson here is suppose is don't try to create derivative collections. Use properties that don't copy the collection, but just refer to it.
public Dictionary<String,FrameworkElement> ByName
{
get
{
return
this.Children.AsQueryable().Cast<FrameworkElement>()
.ToDictionary( element => element.Tag.ToString() );
}
}
And things like this:
public List<FrameworkElement> Top3
{
get
{
return
this.Children.AsQueryable().Cast<FramworkElement>().
OrderByDescending( element => element.Height )
.Take(3).ToList();
}
}

First, I do not recommend creating multiple collections with the same data. Instead of trying to synchronize these collections, you should instead focus on taking advantage of the data-binding engine built into WPF.
Per your comments it sounds like you want something like the following:
This uses your Composite class, but tweaked to use DependencyProperties. These special types of properties are really useful for working in design-time and also allow your properties to partake in the data-binding system. If you haven't already, see the Dependency Properties Overview
Composite.cs
using System.Collections;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using System.Windows.Markup;
using System.Windows.Shapes;
namespace _34639801
{
[ContentProperty("Children")]
public class Composite : FrameworkElement
{
public static readonly DependencyProperty ChildrenProperty = DependencyProperty.Register("Children",
typeof(IList),
typeof(Composite),
new PropertyMetadata(default(IList)));
[Category("Common")]
public IList Children
{
get { return (IList)GetValue(ChildrenProperty); }
set { SetValue(ChildrenProperty, value); }
}
//Get children by name.
public Shape this[string name]
{
get
{
foreach (Shape s in Children)
{
if (s.Name.Equals(name))
{
return s;
}
}
return null;
}
}
public Composite()
{
SetCurrentValue(ChildrenProperty, new ObservableCollection<Shape>());
}
}
}
MainWindow.xaml
<Window x:Class="_34639801.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:_34639801"
mc:Ignorable="d"
Title="MainWindow" Height="456.061" Width="575.91">
<Grid>
<Grid.DataContext>
<local:Composite>
<local:Composite.Children>
<Rectangle Width="40" Height="20" Fill="Red" Stroke="Black" Name="R1"/>
<Rectangle Width="50" Height="20" Fill="Cyan" Stroke="Blue" Name="R2"/>
<Rectangle Width="40" Height="20" Fill="Green" Stroke="Black" Name="R3"/>
<Rectangle Width="90" Height="10" Fill="Blue" Stroke="Black" Name="R4"/>
<Rectangle Width="40" Height="80" Fill="Yellow" Stroke="Black" Name="R5"/>
<Rectangle Width="40" Height="10" Fill="Magenta" Stroke="Black" Name="R6"/>
<Rectangle Width="30" Height="30" Fill="Orange" Stroke="Black" Name="Square"/>
</local:Composite.Children>
</local:Composite>
</Grid.DataContext>
<ListBox ItemsSource="{Binding Children}" Margin="10,10,0,10" HorizontalContentAlignment="Stretch" HorizontalAlignment="Left" Width="337">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1,1,1,1">
<Grid>
<TextBlock Margin="6,0,0,0" Text="{Binding Name, StringFormat=Name: {0}}"/>
<TextBlock Margin="6,14,0,0" Text="{Binding Width, StringFormat=Width: {0}}"/>
<TextBlock Margin="6,28,0,0" Text="{Binding Height, StringFormat=Height: {0}}"/>
<TextBlock Margin="6,42,0,0" Text="{Binding Fill, StringFormat=Fill: {0}}"/>
<TextBlock Margin="6,56,0,0" Text="{Binding Stroke, StringFormat=Stroke: {0}}"/>
<Border BorderBrush="Black" BorderThickness="1,0,0,0" Margin="110,0,0,0" HorizontalAlignment="Stretch" Padding="10">
<ContentPresenter Content="{Binding}"/>
</Border>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox Margin="352,10,10,377">
<TextBox.Text>
<MultiBinding StringFormat="{}Name: {0}, Dimensions: {1} x {2}">
<Binding Path="Children[6].Name"/>
<Binding Path="Children[6].Width"/>
<Binding Path="Children[6].Height"/>
</MultiBinding>
</TextBox.Text>
</TextBox>
<TextBox Margin="352,54,10,333">
<TextBox.Text>
<MultiBinding StringFormat="{}Name: {0}, Dimensions: {1} x {2}">
<Binding Path="[Square].Name"/>
<Binding Path="[Square].Width"/>
<Binding Path="[Square].Height"/>
</MultiBinding>
</TextBox.Text>
</TextBox>
</Grid>
</Window>
The method of using the 'synchronized' collection was to instead use an indexer found in Composite.cs. I've tried several ways to synchronize the collections in a similar manner to how you set it up, but all had issues and increased in complexity. I believe the reason why it doesn't synchronize in your case for the designer is because you are not signaling an INotifyPropertyChanged.PropertyChanged event.
I encourage you to find alternative solutions to synchronizing multiple collections manually, especially when they have the same data. It is much better to let the WPF binding engine to take care of things for you.

Related

How to access element (Image) from ControlTemplate defined in XAML

1) Copy and paste the following code into MainWindow.xaml file.
<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="350" Width="525" Loaded="Window_Loaded">
<Window.Resources>
<Style x:Key="ContextMenuStyle" TargetType="{x:Type ContextMenu}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Background="MediumPurple" BorderThickness="1" BorderBrush="MediumPurple" CornerRadius="5">
<StackPanel>
<Button Margin="3,3,3,3" Height="26" Command="ApplicationCommands.Cut">
<DockPanel HorizontalAlignment="Left" Width="150">
<Image x:Name="Image1" Height="20" Width="30"/>
<TextBlock Margin="5,2,5,0" FontSize="16" FontWeight="Bold" FontFamily="Wingdings 2" Text="&"/>
<TextBlock VerticalAlignment="Center" FontWeight="Bold" Text="Cut"/>
<TextBlock VerticalAlignment="Center" TextAlignment="Right" Margin="0,0,5,0" Text="Ctrl+X"/>
</DockPanel>
</Button>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TextBox Height="50" Width="300">
<TextBox.ContextMenu>
<ContextMenu Style="{StaticResource ContextMenuStyle}"/>
</TextBox.ContextMenu>
</TextBox>
</Grid>
</Window>
2) Copy and paste the following code into MainWindow.xaml.cs file.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Image1.Source = BitmapFrame.Create(new System.IO.MemoryStream(System.Convert.FromBase64String("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")), BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
}
}
}
This is the error message:
The name 'Image1' does not exist in the current context
This is the error picture:
So, how to access Image1 element from xaml control template?

Templates (ControlTemplate, DataTemplate) are expected to be used to create multiple copies of the same layout. Those copies may be parametrized via Bindings or resources.
To set Source for Image inside template, you can use
1) a DynamicResource
changes in xaml:
<Image x:Name="Image1" Height="20" Width="30" Source="{DynamicResource MyPicture}"/>
code-behind:
public partial class MainWindow: Window
{
public MainWindow()
{
var img = BitmapFrame.Create(new System.IO.MemoryStream(System.Convert.FromBase64String("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")), BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
this.Resources["MyPicture"] = img;
InitializeComponent();
}
}
2) Binding
changes in xaml:
<Image x:Name="Image1" Height="20" Width="30" Source="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource AncestorType=ContextMenu}}"/>
code-behind (txt is a Name assigned to TextBox: <TextBox Height="50" Width="300" x:Name="txt">)
public partial class MainWindow: Window
{
public MainWindow()
{
InitializeComponent();
var img = BitmapFrame.Create(new System.IO.MemoryStream(System.Convert.FromBase64String("iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAFxAAABcQBm3m1AAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAWmSURBVHic7ZxbaB1VFEBXHiY2aCqN1Sb4rDSpabRSDQWrFhLU/vjRfogK+mlB0eqH9k9UUClYNIgfCvH15QO0oKjx1dgU6gPRVnzFR61gRSuiNCamqR0/9h7P9ObOnTkz5947kzsLhrmPs/fZe+ecPWf2nBsoKCgoKCgoKChoRJoSyHjOrcgWVjFprpYVjUJrCtkkozfLJJpZxQhMSRHAlMSZhgv9ohFFxRgVIzAlNheRhXbRiCLWzCtGYEqKAKYkbFo2+oUjjHnxKkZgSqIuIo124QgjdEYWIzAlRQBTUgQwJUUAUxIVwIeB9loYklFOBLYnEfQCx/fAOodG5YV1iO/BWMTGF9in53+Au2iMKd8M3I347AF7SRHAVmArcETffwj0OjQ2a/QhPnqIz1uRGCQOoM9aYFI/mwa2sLAW2U2IT9OIj5OIzz6pAwjQAYwEvnsT6Elmb6boAcYwfo0gvgZxEkCfDcBB/f43YKON4oyxETiE+HIQ8a0czgK4E3gXOAN4R9scAx5n/l8ty3QgNh9DfHgb8cn3rxRnAZwA3tfXTcCdwIy2/RoYtOmkTgwitnqI7Xdg8nnQvyBOp3Ap5wK7tf2/SA5ps+msRrQjtvmjbgKxPQ5VDSDMX+58Dqy26bDKrEZsKl2exMV5DgxjPfCjyk4Bm6nvcqdJbZhSm/YDV1RoX9McGMZi4LmAjteA0206d8Qy7du341mgM0KmLjkwjKsxy50/gRtT6rPhJu3TA35WW9JQlwACLAV2BPS9CCxxoDeMJdqH398rakNaapYDy9EE3I65TapWdecy4AfM7eZt2OffTOTAMPqBT1TvUeBB3Cx32oCHVKenfZyfUFemcmA5/OXOrOr/AliTQt8a4EvVNau6W1LaWI7MBNAneDcwB9yLneMtKjOHuQu6xKmFx1PXHBhGJ/B0oC//fjSK4H24BzwFnOzIpkznwDA2YSoifwDXVWh7vbbxVGaTY1synwPD6AbeCPQ7BlyFLMoXI+u4twLfv44slGtF5gMIsuS4FTgc6L/0OAzcQu1vD0PjEbU7q/T7nUg1Y9iNXWXpQdZwG4Cz9bMDyAh9DPglod5TgGsQ2/uBszDLqCPax1dIfn0V+Csguwu4HIs/XC1zYLU5ExjF1C3jHDPAM5j1ZDPyzCQ29ZjCrukAtmHugDzgU+A+4EpgADhNjwH97H5t47efAx4BFtl2nvcAdgMfYR45PI88soxLH/ACpvj6AZYXrVqsA6vFAPATYv8kcHEKXYPAd6rrALAqrmBec2A3JnjvEV35iTMguoBxTBBj1TbzOIUXYXYVjBOvUBHXzzZk4HjAHmTTkRPFWeIBTLmsK6aMjZ+nYspl25IqzmoO7AH+RpL+2oi2QWwHyqXaxyxwXhLFWc2BTyD2vmQpl2SmvawyT7pWXC86MaNvpaVsEj/7VWYKOMml4npxA6YSbUtSPz9TuWttN0yW5sB6vwcY0vOOCNtd4vc1ZPuT/1ZkqmTlPcCFep6IsN0lu/QcuvsiT1PYL8Ym2Tmb1M+VKvera8X1wH9AZVvW7yW5n50qN7MQNo37NTqbQAwjBQKAbxL0GVYvPa5BXkagP4VXxGy/GbOLbAwptNrSR8wpnOXjIrXVL1utj3C6BXg0ID9C8v+bM6Q69uR5Cl+g5316rrRtrRMp029BiqQ36+ujCfv2+9qbUD5TxFlI+1WaQ0SP1Dj8v5B2oKvuxLmV2w18DCx30F+sW7m8MUqyYkISYhUT8kYvkttsy1m2xC5n5ZHt2BdUbbAqqOaRJCX9uFiX9PNKF/AtxlEXm9uXqS5PdVdjdGeKVZifWrh8rLkfuQI3BEsxU87Fg/VxJAc2FCcgu1iDe2L8rR3DyL1zux4r9LPSrR3TwD2qq2E5B9nFaru5aBTZwVWRhfSr8yjKbW/zp+XvVN7eFsp/iNdPNffUYOUAAAAASUVORK5CYII=")), BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
txt.Tag = img;
}
}
Using Tag is a quick-and-dirty solution. When I need to custiomize templates, I prefer to create specialized Attached Dependency Properties - see this example for details

if the real problem is "how to set Image.Source from base64 string", then it is possible to do with a value converter, without code behind:
converter:
public class Base64ImageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is string)
{
return BitmapFrame.Create(new System.IO.MemoryStream(System.Convert.FromBase64String((string)value)), BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
}
return null;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
template:
<Window.Resources>
<local:Base64ImageConverter x:Key="imageConverter"/>
<system:String x:Key="imageLetter">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</system:String>
<Style x:Key="ContextMenuStyle" TargetType="{x:Type ContextMenu}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<Border Background="MediumPurple" BorderThickness="1" BorderBrush="MediumPurple" CornerRadius="5">
<StackPanel>
<Button Margin="3,3,3,3" Height="26" Command="ApplicationCommands.Cut">
<DockPanel HorizontalAlignment="Left" Width="150">
<Image x:Name="Image1" Height="20" Width="30" Source="{Binding Source={StaticResource imageLetter}, Converter={StaticResource imageConverter}}"/>
<TextBlock Margin="5,2,5,0" FontSize="16" FontWeight="Bold" FontFamily="Wingdings 2" Text="&"/>
<TextBlock VerticalAlignment="Center" FontWeight="Bold" Text="Cut"/>
<TextBlock VerticalAlignment="Center" TextAlignment="Right" Margin="0,0,5,0" Text="Ctrl+X"/>
</DockPanel>
</Button>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Source is set like this (using converter and base64 string, both defined in Resources):
Source="{Binding Source={StaticResource imageLetter}, Converter={StaticResource imageConverter}}"

C# wpf caliburn.Micro MahApps HamburgerMenu.ContentTemplate data binding is not working

I'm making an application using Caliburn.Micro(for easy data binding and stuff) and MahApps.Metro(for designing).
I've created a View name 'MainView' which has HamburgerMenu of MahApps.
My issue is data binding is working fine under HamburgerMenu.ContentTemplate tag
Here is my HamburgerMenu.ContentTemplate xaml.
<Page x:Class="Sample.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="http://www.caliburnproject.org"
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:utils="clr-namespace:Omni.WindowsClient.Utils"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Omni.WindowsClient.Views"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="600">
<Page.Resources>
<DataTemplate x:Key="HamburgerMenuItem"
DataType="{x:Type mah:HamburgerMenuItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Margin="12"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Glyph}"
Stretch="UniformToFill" />
<TextBlock Grid.Column="1"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text="{Binding Label}" />
</Grid>
</DataTemplate>
</Page.Resources>
<Grid>
<mah:HamburgerMenu x:Name="HamburgerMenuControl"
SelectedIndex="0"
ItemTemplate="{StaticResource HamburgerMenuItem}"
OptionsItemTemplate="{StaticResource HamburgerMenuItem}"
IsPaneOpen="True"
DisplayMode="CompactInline"
cal:Message.Attach="[Event ItemClick] = [Action ShowDetails(HamburgerMenuControl.SelectedItem)]"
DataContext="{Binding RelativeSource={RelativeSource self}}">
<mah:HamburgerMenu.ItemsSource>
<mah:HamburgerMenuItemCollection>
<mah:HamburgerMenuItem Label="System Status">
<mah:HamburgerMenuItem.Tag>
<iconPacks:PackIconFontAwesome Width="22"
Height="22"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Kind="Tasks" />
</mah:HamburgerMenuItem.Tag>
</mah:HamburgerMenuItem>
<mah:HamburgerMenuItem Label="Inbox">
<mah:HamburgerMenuItem.Tag>
<iconPacks:PackIconFontAwesome Width="22"
Height="22"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Kind="Inbox" />
</mah:HamburgerMenuItem.Tag>
</mah:HamburgerMenuItem>
<mah:HamburgerMenuItem.Tag>
<iconPacks:PackIconFontAwesome Width="22"
Height="22"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Kind="Certificate" />
</mah:HamburgerMenuItem.Tag>
</mah:HamburgerMenuItem>
</mah:HamburgerMenuItemCollection>
</mah:HamburgerMenu.ItemsSource>
<mah:HamburgerMenu.ContentTemplate>
<DataTemplate DataType="{x:Type mah:HamburgerMenuItem}">
<Grid utils:GridUtils.RowDefinitions="48,*">
<!--cal:Action.TargetWithoutContext="{Binding ElementName=HamburgerMenuControl, Path=DataContext}"-->
<Border Grid.Row="0"
Background="{DynamicResource MahApps.Metro.HamburgerMenu.PaneBackgroundBrush}">
<TextBlock x:Name="Header"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="24"
Foreground="White" />
<!--Text="{Binding Path=Header, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"-->
</Border>
<Frame Grid.Row="1"
cal:Message.Attach="RegisterFrame($source)"
DataContext="{x:Null}"
NavigationUIVisibility="Hidden" />
</Grid>
</DataTemplate>
</mah:HamburgerMenu.ContentTemplate>
</mah:HamburgerMenu>
</Grid>
</Page>
and respective view model code is:
using Caliburn.Micro;
using MahApps.Metro.Controls;
using System.Windows.Controls;
namespace Sample.ViewModels
{
public class MainViewModel : Screen
{
private readonly SimpleContainer _container;
private INavigationService _navigationService;
private string _header;
public string HeaderTitle
{
get { return _header; }
set
{
_header = value;
NotifyOfPropertyChange();
}
}
public MainViewModel(SimpleContainer container)
{
this._container = container;
DisplayName = "Main";
}
public void RegisterFrame(Frame frame)
{
_navigationService = new FrameAdapter(frame);
_container.Instance(_navigationService);
_navigationService.NavigateToViewModel(typeof(SystemStatusViewModel));
HeaderTitle = "System Status";
}
public void ShowDetails(HamburgerMenuItem menuItem)
{
switch (menuItem.Label)
{
case "System Status":
_navigationService.NavigateToViewModel(typeof(SystemStatusViewModel));
HeaderTitle = "System Status";
break;
case "Inbox":
_navigationService.NavigateToViewModel(typeof(InboxViewModel));
HeaderTitle = "Inbox";
break;
default:
break;
}
}
}
}
I want to change View in frame under HamburgerMenu.ContentTemplate when I click on menu item.
Like System Status view is SystemStatusView
and Inbox view is InboxView.
My code is working fine (it changes the view in frame and change the Header label too) if I don't use HamburgerMenu.ContentTemplate. But I want to use HamburgerMenu.ContentTemplate to work with HamburgerMenu.
Thanks!

If it's working fine if you don't use HamburgerMenu.ContentTemplate, but stops working when you do, the problem is probably with you overwriting the default template in a way that doesn't support all functionalities of a control.
I'd suggest you to use Blend to get the default HamburgerMenu.ContentTemplate, then just edit it to your needs, without changing too much (keep in mind that names of controls used as a template may have a crucial meaning, so be careful what you are editing).
If you don't know how to use Blend to get your control's template, here is a simple tutorial described in a documentation of Telerik controls (don't worry, it works the same for all controls). You just need to create copy of a HamburgerMenu.ContentTemplate, paste it to your application and you are good to go (editing).

How to create databinding in code behind using the same object that is initiated in xaml?

I have the following code :
<Window x:Class="WpfApplication3.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:WpfApplication3" xmlns:oxy="http://oxyplot.org/wpf"
xmlns:vm="clr-namespace:ViewModel;assembly=ViewModel"
Background="#FFDEDEDE"
WindowStyle="None"
AllowsTransparency="True"
WindowStartupLocation="CenterScreen"
mc:Ignorable="d"
Title="Compression Test" Height="1080" Width="1920">
<Window.Resources>
<vm:MainViewModel x:Key="vmMain"
sampleCount="100" />
</Window.Resources>
<Grid x:Name="gridUI">
<StackPanel Orientation="Vertical">
<StackPanel Height="100">
<Border Background="#FF8986D3" Height="100" Margin="0,0,0,30" >
<TextBlock Text="COMPRESSION TEST" FontFamily="Sans-serif" FontSize="30" Foreground="#FFF9F9F9" VerticalAlignment="Center" FontWeight="Medium" HorizontalAlignment="Center"/>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="auto">
<Border BorderBrush="White" BorderThickness="2" >
<StackPanel Orientation="Vertical" Width="200" Height="1080">
<Label FontSize="24" FontFamily="Sans-serif" FontWeight="Medium" Name="doc" Foreground="White" Background="#FFA39AD8" Width="200" HorizontalContentAlignment="Center" Height="43">Files</Label>
<Border BorderBrush="#FFD4D4D4" BorderThickness="0.5" Grid.Row="3"></Border>
<StackPanel Name="sp_doc" Margin="0,10,0,0" >
<StackPanel Orientation="Horizontal" Name="sp_sample_button" Grid.Row="0" Grid.Column="0">
<Image Source="pack://application:,,,/Resources/413.png" Height="40" Width="40" UseLayoutRounding="True" MouseDown="sampleDropDown" Cursor="Hand" Margin="5,0,0,0" Name="up_arrow"/>
<Image Source="pack://application:,,,/Resources/412.png" Height="40" Width="40" UseLayoutRounding="True" MouseDown="sampleDropDown" Cursor="Hand" Margin="5,0,0,0" Name="down_arrow" Visibility="Collapsed"/>
<!--<Button x:Name="sss" Click="sampleDropDown">s</Button>-->
<Label FontSize="18" FontFamily="Sans-serif" FontWeight="Light" Name="sam" Foreground="White" Margin="10">Samples</Label>
</StackPanel>
<StackPanel Orientation="Vertical" Name="sp_s">
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1">
<Image Source="pack://application:,,,/Resources/413.png" Height="40" Width="40" UseLayoutRounding="True" RenderTransformOrigin="-0.,0.558" MouseDown="reportDropDown" Cursor="Hand" Margin="5,0,0,0" Name="up_arrow1"/>
<Image Source="pack://application:,,,/Resources/412.png" Height="40" Width="40" UseLayoutRounding="True" Cursor="Hand" Margin="5,0,0,0" Name="down_arrow1" Visibility="Collapsed" MouseDown="reportDropDown"/>
<!--<Button Click="reportDropDown">r</Button>-->
<Label FontFamily="Sans-serif" FontWeight="Light" Foreground="White" FontSize="18" Margin="10">Reports</Label>
</StackPanel>
<StackPanel Orientation="Vertical" Name="sp_r">
</StackPanel>
</StackPanel>
</StackPanel>
</Border>
<StackPanel Width="1781">
<StackPanel Orientation="Horizontal" Background="#FFFDFDFD" Height="111">
<TextBox Name="sampleCount" Text="{Binding sampleCount, Source={StaticResource vmMain}, UpdateSourceTrigger=PropertyChanged}" Width="200"></TextBox>
<Button Cursor="Hand" Height="75" Width="75" Style="{StaticResource CircleButton}" FontFamily="Sans-Serif" FontSize="25" Foreground="White" Click="NewSample_Click" Content="+" Margin="20,0,0,0" Background="#FFACAABF" />
<StackPanel Margin="20,19,0,0">
<Image Source="pack://application:,,,/Resources/file512.png" Height="75" Width="75" UseLayoutRounding="True" Margin="0,0,0,0" MouseDown="CreateReport_Click" Cursor="Hand" SnapsToDevicePixels="True"/>
</StackPanel>
<Image Source="pack://application:,,,/Resources/play1.png" Height="75" Width="75" UseLayoutRounding="True" Margin="20,18,0,18" MouseDown="CreateReport_Click" Cursor="Hand" SnapsToDevicePixels="True"/>
<Image Source="pack://application:,,,/Resources/1131.png" Height="75" Width="75" UseLayoutRounding="True" Margin="1340,0,0,0" MouseDown="CreateReport_Click" Cursor="Hand"/>
</StackPanel>
<Frame x:Name="newSampleFrame" Content="" HorizontalAlignment="center" VerticalAlignment="center" Width="934" Height="456" NavigationUIVisibility="Hidden" RenderTransformOrigin="0.408,0.5" Visibility="Collapsed"/>
<Frame x:Name="reportFrame" Content="" HorizontalAlignment="Center" Height="842" VerticalAlignment="Center" Width="595" Margin="0,100,0,0" NavigationUIVisibility="Hidden"/>
<Frame x:Name="graphFrame" Content="" HorizontalAlignment="Center" Height="456" VerticalAlignment="Center" Width="934" NavigationUIVisibility="Hidden" Visibility="Collapsed"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Window>
MainViewModel.cs :
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ViewModel
{
public class MainViewModel : ObservableObject
{
public MainViewModel()
{
}
private string[] sampleName;
private string _sampleCount;
public Data obj2 = new Data();
public string this[int pos]
{
get
{
return sampleName[pos];
}
set
{
sampleName[pos] = value;
}
}
public string sampleCount
{
get
{
return _sampleCount;
}
set
{
if (value != _sampleCount)
{
_sampleCount = value;
OnPropertyChanged("sampleCount");
Console.WriteLine("Test");
Console.WriteLine(value);
obj2.sampleCount = value;
SaveFile.saveFileMain(obj2);
}
}
}
}
}
And I have the following code that create a textblock whenever I click on the OK button :
window2.xaml.cs:
private void Ok_Click(object sender, MouseButtonEventArgs e)
{
MainWindow win = (MainWindow)Application.Current.MainWindow;
int i = 1; // counter for the name of each new textblock
string name = String.Concat("sample", i);
// add textblok to the document list of new samples
if (File_name.Text != "")
{
TextBlock sampleText = new TextBlock();
sampleText.Text = File_name.Text;
sampleText.FontSize = 14;
sampleText.FontFamily = new FontFamily("Sans-serif");
sampleText.FontWeight = FontWeights.DemiBold;
sampleText.Margin = new Thickness(20,0,0,0);
sampleText.Name = name;
sampleText.PreviewMouseDown += new MouseButtonEventHandler(test1);
sampleText.Visibility = System.Windows.Visibility.Collapsed;
//binding
Binding myBinding = new Binding();
myBinding.Source =
myBinding.Path = new PropertyPath("sampleName");
myBinding.Mode = BindingMode.TwoWay;
myBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
sampleText.SetBinding(TextBlock.TextProperty, myBinding);
Grid.SetColumn(sampleText, 0);
win.sp_s.Children.Add(sampleText);
// checking if the drop down of sample is already open, if so it will show the last textblock with pressing the arrow button.
var textblockSample = win.sp_s.Children.OfType<TextBlock>().FirstOrDefault();
if (textblockSample.Visibility == System.Windows.Visibility.Visible)
{
sampleText.Visibility = System.Windows.Visibility.Visible;
}
}
i += 1; // increasing the loop of names by 1
this.Close();
}
Is it possible to use the same object that is initiated in xaml (vmMain) as a source for binding the textblock (sample text) to sampleName property?

Not sure why you don't set DataContext of your MainWindow to MainViewModel.
<Window.DataContext>
<StaticResourceExtension ResourceKey="vmMain" />
</Window.DataContext>
Or, you can even set DataContext via MainWindow's code behind, which you don't seem to intent to not keep it untouched.
Then to set binding source:
myBinding.Source = this.DataContext;
In the case you refused to set the DataContext, you still can:
myBinding.Source = this.FindResource("vmMain") as MainViewModel;
Not sure if I managed to solve your problem.
Edit
I just realised your binding is in window2. You should do this:
myBinding.Source = win.DataContext;
Similarly, myBinding.Source = this.FindResource("vmMain") as MainViewModel; should also be changed to myBinding.Source = win.FindResource("vmMain") as MainViewModel;.
This is provided you still have that MainWindow win = (MainWindow)Application.Current.MainWindow; line there.

I believe that what you are looking for is the resources property:
myBinding.Source = Resources["vmMain"];
Resource allows you to access the XAML-defined (or otherwise) resources for the current object - the window.
You can also access the resources of any FrameworkElement in the same manner.
EDIT: I hadn't noted the fact that the vmMain was in a different class. With this in mind, no there is no way to reference that object directly from Window2 as there may be multiple MainWindows so you'd have to pick which MainWindow instance the vmMain should be taken from.
What you can do, however is create vmMain in your Application object (App.xaml). This would then share that object across all FrameworkElements in your application. To access this you could use
myBinding.Source = Application.Currennt.Resources["vmMain"];

BindingExpression Path Error - How to structure code in MVVM model?

I have a Button that when clicked should adjust the Widths of two Grids.
<DataTemplate x:Key="ItemTemplate">
<DockPanel Width="Auto">
<Button Click="SelectMovie_Click" DockPanel.Dock="Top">
<Button.Template>
<ControlTemplate >
<Image Source="{Binding image}"/>
</ControlTemplate>
</Button.Template>
<i:Interaction.Behaviors>
<local:UniqueNameBehavior ID="{Binding id}"/>
</i:Interaction.Behaviors>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction Command="{Binding ShowRightGridCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<TextBlock Text="{Binding title}" HorizontalAlignment="Center" DockPanel.Dock="Bottom"/>
</DockPanel>
</DataTemplate>
This Button is displayed within a Grid as such:
<Grid Grid.Row="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding LeftGridWidth}" />
<ColumnDefinition Width="{Binding RightGridWidth}" />
</Grid.ColumnDefinitions>
// BUTTONS DISPLAYED HERE
<Grid x:Name="LeftGrid" Grid.Row="2" Grid.Column="0" >
<Border BorderThickness="1" BorderBrush="Red">
<ItemsControl ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding _movies}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Border>
</Grid>
<Grid x:Name="RightGrid" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1" >
<DockPanel>
<StackPanel VerticalAlignment="Top" Height="200">
<TextBlock Width="200" Height="50" DockPanel.Dock="Top" HorizontalAlignment="Left">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} ({1})">
<Binding Path = "SelectedMovie.title"/>
<Binding Path = "SelectedMovie.year"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</StackPanel>
<StackPanel VerticalAlignment="Top" Height="200">
<Grid HorizontalAlignment="Center">
<Image Source="star_icon.png" Width="100" Height="100" VerticalAlignment="Top"/>
<TextBlock Text="{Binding SelectedMovie.rating}" Style="{StaticResource AnnotationStyle}" Width="150"/>
</Grid>
</StackPanel>
</DockPanel>
</Grid>
</Grid>
ViewModel
public List<MediaDetail> _movies { get; set; }
public string selectedMovieID { get; set; }
private GridLength _leftGridWidth;
private GridLength _rightGridWidth;
private readonly GridLength _defaultRightGridWidth = new GridLength(0, GridUnitType.Pixel);
public MoviePanelViewModel()
{
ShowRightGridCommand = new DelegateCommand(SwitchRightGridWidth);
LeftGridWidth = new GridLength(7, GridUnitType.Star);
RightGridWidth = _defaultRightGridWidth;
}
private void SwitchRightGridWidth()
{
RightGridWidth = RightGridWidth == _defaultRightGridWidth ? new GridLength(3, GridUnitType.Star) : _defaultRightGridWidth;
}
public GridLength LeftGridWidth
{
get { return _leftGridWidth; }
set { _leftGridWidth = value; OnPropertyChanged("LeftGridWidth"); }
}
public GridLength RightGridWidth
{
get { return _rightGridWidth; }
set { _rightGridWidth = value; OnPropertyChanged("RightGridWidth"); }
}
public ICommand ShowRightGridCommand { get; set; }
The problem is that when I run my code, I get the error:
BindingExpression path error: 'ShowRightGridCommand' property not found on 'object' ''MediaDetail'
I am not sure how to structure my code such that the Width properties for the Grids can remain in the ViewModel but the Trigger for my Button also works. The DataContext for my View is the ViewModel.
Is there a good way to achieve this?
Thank you for your help.

The problem is your binding inside a DataTemplate: WPF tries to find the property path ShowRightGridCommand on your MediaDetail class, because the ItemsControl sets the data context for each item container it generates to the corresponding item.
What you actually want to do is binding to the view model. You can do this like so:
{Binding ElementName=LeftGrid, Path=DataContext.ShowRightGridCommand}
LeftGrid is an element outside of the ItemsControl. Its DataContext is your MoviePanelViewModel instance, and there is your ShowRightGridCommand property defined.
A little cleaner would be to put the name root on your view's root control (usually a UserControl or Window), and then use ElementName=root,Path=DataContext.... as your binding - at least that's what I usually do.
An alternative would be to use RelativeSource={RelativeSource UserControl}, but I find ElementName=root to be simpler.

data doesn't show on Text={Binding}?

Im quite new to silverlight and windows 7 phone development. And I'm not sure what I missed but apparantly I missed something because it's not working as intended.
My goal, is to show a list of creatures, with only their name and hitpoints. But the whole Text={Binding}-stuff apparently doesn't work. So I wonder if any of you guys could help me with this.
When i say it dosen't work, its because the data is in the creature list, but not in the page/textblocks - it shows the right amount of creatures, but just not the data.
XAML
<phone:PhoneApplicationPage
x:Class="RPG_Assistent.Pages.DamageTrackerPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<!--<Button Content="Damage" Height="72" HorizontalAlignment="Left" Margin="0,618,0,0" Name="btnDamage" VerticalAlignment="Top" Width="160" Click="btnDamage_Click" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="158,618,0,0" Name="txtDamage" Text="" VerticalAlignment="Top" Width="286" KeyUp="NumericOnlyTextBox_KeyUp"></TextBox>-->
<ListBox ItemsSource="{Binding creatureList}" Height="500" HorizontalAlignment="Center" Margin="6,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="400">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="400" Height="120" >
<Button.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="80" Width="200">
<StackPanel Orientation="Vertical" Height="40">
<TextBlock Width="100" FontSize="22" Text="Name:" Height="40"/>
<TextBlock Width="100" Text="{Binding Name}" Height="40"/>
</StackPanel>
<StackPanel Orientation="Vertical" Height="40">
<TextBlock Width="100" FontSize="22" Text="Hitpoints:" Height="40"/>
<TextBlock Width="100" Text="{Binding HitPoints}" Height="40"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->
CS - called when page is done loading stuff in. ( called after InitializeComponent(); on my DamageTracker Page )
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
namespace RPG_Assistent.Pages
{
public partial class DamageTrackerPage : PhoneApplicationPage
{
List<Models.Creature> creatureList { get; set; }
public DamageTrackerPage()
{
InitializeComponent();
creatureList = new List<Models.Creature>();
#region ApplicationTitle Setup
ApplicationTitle.Text = Constants.AppName;
ApplicationTitle.TextAlignment = Constants.AppName_TextAlignment;
ApplicationTitle.FontSize = Constants.AppName_FontSize;
ApplicationTitle.FontWeight = Constants.AppName_FontWeight;
#endregion
//SetInputScope(txtDamage);
LoadCreatures();
DataContext = this;
}
public void LoadCreatures()
{
string name;
for (int i = 0; i < 10; i++)
{
name = "Monster " + i + 1;
creatureList.Add(new Models.Creature(name));
}
}
public void btnDamage_Click(object sender, RoutedEventArgs e)
{
}
#region textbox control - makes numeric only
private void SetInputScope(TextBox textBoxControl)
{
InputScopeNameValue digitsInputNameValue = InputScopeNameValue.TelephoneNumber;
textBoxControl.InputScope = new InputScope()
{
Names = {
new InputScopeName()
{
NameValue = digitsInputNameValue
}
}
};
}
private void MaskNumericInput(TextBox textBoxControl)
{
string[] invalidCharacters = { "*", "#", ",", "(", ")", "x", "-", "+", " ", "#", "." };
for (int i = 0; i < invalidCharacters.Length; i++)
{
textBoxControl.SelectionStart = textBoxControl.Text.Length;
}
}
private void NumericOnlyTextBox_KeyUp(object sender, KeyEventArgs e)
{
MaskNumericInput((TextBox)sender);
}
#endregion
}
}
CS - Creature class, is placed in "Models" folder - because i thought i would be clever
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace RPG_Assistent.Models
{
public class Creature
{
public string Name { get; set; }
public int HitPoints { get; set; }
public string Type { get; set; }
public Creature(string name)
{
this.Name = name;
this.HitPoints = 0;
this.Type = "Images/mob.jpg";
}
public void Damage(int damage)
{
HitPoints += damage;
}
public void Bloodied()
{
switch (this.Type)
{
case "Images/mob.jpg":
this.Type = "Images/mobhurt.jpg";
break;
case "Images/mobhurt.jpg":
this.Type = "Images/mob.jpg";
break;
}
}
}
}

Since you are binding to a list of Creatures, you do not need to put Creature.Name. You should be able to change it to Text={Binding Name} and Text={Binding Hitpoints}

It looks like it should be Text={Binding Name} or Text={Binding HitPoints}
EDIT: but, Text={Binding Path=Name} or Text={Binding Path=HitPoints} would work too.
EDIT 2: Sorry, I didn't notice your comment. I don't have VS in the computer, so I can't try it myself, but try setting the DataType on the DataTemplate to Creature.

Update your binding to the following. I´ve dropped Creature, from the binding path. Then it should work
<StackPanel Orientation="Vertical" Height="40">
<TextBlock Width="100" FontSize="22" Text="Name:" Height="40"/>
<TextBlock Width="100" Text="{Binding Path=Name}" Height="40"/>
</StackPanel>
<StackPanel Orientation="Vertical" Height="40">
<TextBlock Width="100" FontSize="22" Text="Hitpoints:" Height="40"/>
<TextBlock Width="100" Text="{Binding Path=HitPoints}" Height="40"/>
</StackPanel>

You always bind to the DataContext with direct bindings, and when setting the ItemsSource to a list, the DataContext becomes each item in the list for each row it will represent. So your thinking here is completely correct!
However: ContentControl act the same. When you set the Content of a ContentControl you basicly override the DataContext for the Content. The DataContext is thus set as your StackPanel, and it will render itself as your StackPanel, but you will also try to Bind to your StackPanel, and not to your Creature object anymore.
So you might want to do this:
Move your content StackPanel to a DataTemplate, set this DataTemplate as ContentTemplate on your Button and set the Content of the Button to a Binding of your Creature object, like so:
<Button Width="400" Height="120" Content="{Binding}">
<Button.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="80" Width="200">
<StackPanel Orientation="Vertical" Height="40">
<TextBlock Width="100" FontSize="22" Text="Name:" Height="40"/>
<TextBlock Width="100" Text="{Binding Path=Name}" Height="40"/>
</StackPanel>
<StackPanel Orientation="Vertical" Height="40">
<TextBlock Width="100" FontSize="22" Text="Hitpoints:" Height="40"/>
<TextBlock Width="100" Text="{Binding Path=HitPoints}" Height="40"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Button.ContentTemplate>
</Button>

My preferred way of handling these occasions I set up a collection for the view. It would look something like this
public class CreatureList : ObservableCollection<Creature>
{
// at least implement the constructor
}
After that you can use the new collection class in your window XAML definition.
<ResourceDictionary>
<local:CreatureList x:Key="creatures" />
</ResourceDictionary>
The definition of the local namespace has to be set to the assembly namespace where the class CreatureList would be found. After that you can use the defined list in your listbox definition.
<ListBox Name="creatureListBox" ItemsSource="{Binding Source={StaticResource creatures}}">
<!-- Template definition for each entry -->
</ListBox>
To use these objects in your window class, you have to set up some attributes and associate them to the specified entry.
public partial class DamageTrackerPage : PhoneApplicationPage
{
private readonly CreatureList creatureList;
}
In the constructor of the class you bind the attribute to the specified XAML definition.
public DamageTrackerPage() {
InitializeComponent();
creatureList = FindResource("creatures") as CreatureList;
}
Now when you add entries to the list or remove entries from it the changes will be updated to your window automatically.
This is at least the way I'm doing it in WPF, but I'm sure for WinPhone apps that should be the same.

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

xaml collections syncing / designer support - c#

Related

How to access element (Image) from ControlTemplate defined in XAML

C# wpf caliburn.Micro MahApps HamburgerMenu.ContentTemplate data binding is not working

How to create databinding in code behind using the same object that is initiated in xaml?

BindingExpression Path Error - How to structure code in MVVM model?

data doesn't show on Text={Binding}?

Categories

Resources