OK, so I am pretty sure I'm on the right track with this small application, but let me know. The user enters in 3 of the 4 numbers into the 4 editable textboxes, and the missing number is calculated automatically. Picture of app here:
http://www.peauproductions.com/images/lens_app.PNG
I have looked at data binding, and I think I need to have the values able to globally change. I want the values to dynamically update/compute and not have to have a calculate button.
Once I get it working I need to implement a validation check to make sure a boolean is only entered (no text), and have a tooltip pop up saying to enter a number.
Getting the following ERROR right now:
"'Set property 'System.Windows.Controls.TextBox.Text' threw an exception.' Line number '56' and line position '51'."
MainWindow.xaml Code:
<Window x:Class="ConverterApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ConverterApp" Height="360" Width="280"
xmlns:c="clr-namespace:ConvertorApp;assembly=">
<Grid>
<!--Outer Box + Title-->
<TextBox Height="309" Width="248"
Text=" Lens Calculator"
IsReadOnly="True"
Margin="5,5,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
BorderThickness="2.0"
FontSize="16" FontFamily="Verdana" FontWeight="Bold">
<TextBox.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="Black" Offset="0" />
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<!--Title Text-->
<TextBox Height="50" Width="230"
Text="Enter Image Width, Length and Either Distance or Lens Values Below"
IsReadOnly="True"
Margin="14,29,0,0"
TextWrapping="Wrap"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontSize="12" FontFamily="Verdana" FontStyle="Italic"
BorderThickness="0">
</TextBox>
<TextBox Height="20" Width="230"
Text="Must Be Same Units (in,ft,cm,mm)"
IsReadOnly="True"
Margin="14,59,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontSize="10" FontFamily="Verdana" FontStyle="Italic"
BorderThickness="0">
</TextBox>
<!--Distance-->
<TextBox Height="20" Width="105"
Text="Distance/Height:"
IsReadOnly="True"
Margin="15,80,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontFamily="Verdana"
BorderThickness="0">
</TextBox>
<TextBox x:Name="DistanceBox" Height="20" Width="50"
Text="{x:Static c:Variables.DistanceBox}"
Margin="125,80,0,0"
MaxLength="5"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontFamily="Verdana">
<TextBox.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="Black" Offset="0" />
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<!--Image Width-->
<TextBox Height="20" Width="90"
Text="Image Width:"
IsReadOnly="True"
Margin="15,105,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontFamily="Verdana"
BorderThickness="0">
</TextBox>
<TextBox x:Name="WidthBox" Height="20" Width="50"
Text="{x:Static c:Variables.WidthBox}"
Margin="125,105,0,0"
MaxLength="5"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontFamily="Verdana">
<TextBox.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="Black" Offset="0" />
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<!--Image Length-->
<TextBox Width="95"
Text="Image Length:"
IsReadOnly="True"
Margin="15,130,0,161" HorizontalAlignment="Left"
FontFamily="Verdana"
BorderThickness="0">
</TextBox>
<TextBox x:Name="LengthBox" Height="20" Width="50"
Text="{x:Static c:Variables.LengthBox}"
Margin="125,130,0,0"
MaxLength="5"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontFamily="Verdana">
<TextBox.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="Black" Offset="0" />
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<!--Lens Needed-->
<TextBox Height="20" Width="90"
Text="Lens (mm):"
IsReadOnly="True"
Margin="15,155,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontFamily="Verdana"
BorderThickness="0">
</TextBox>
<TextBox x:Name="LensNeeded" Height="20" Width="50"
Text="{x:Static c:Variables.LensNeeded}"
Margin="125,155,0,0"
MaxLength="4"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontFamily="Verdana">
<TextBox.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="Black" Offset="0" />
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<!--Info-->
<TextBox Height="70" Width="230"
Text="The lens focal length value represents the estimated mm value for a 1/4 inch sensor (Playstation Eye). A lower mm will give a wider Field of View (FOV), and a higher value less FOV. "
IsReadOnly="True"
TextWrapping="Wrap"
Margin="15,180,0,0"
FontSize="11"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontFamily="Verdana" FontStyle="Italic"
BorderThickness="0">
</TextBox>
<TextBox Height="55" Width="230"
Text="It is not recommend you use a lens of less than 2.5mm focal length with image tracking software due to distortion."
IsReadOnly="True"
FontSize="11"
TextWrapping="Wrap"
Margin="15,253,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
FontFamily="Verdana" FontStyle="Italic"
BorderThickness="0">
</TextBox>
</Grid>
MainWindow.xaml.cs Code:
using System;
using System.Windows;
namespace ConvertorApp
{
public class Variables
{
public const double DistanceBox = 0;
public const double WidthBox = 0;
public const double LengthBox = 0;
public const double LensNeeded = 0;
public const double WidthBased = 0;
public const double LengthBased = 0;
public void Calc()
{
double WidthBased = 2.952*(DistanceBox/WidthBox);
double LengthBased = 3.984*(DistanceBox/LengthBox);
if (WidthBased < LengthBased)
{
double LensNeeded = WidthBased;
}else{
double LensNeeded = LengthBased;
}
}
}
}
If you can think of an easier, or more correct way to go about what I'm trying to do, please let me know (I just started learning this WPF/C# stuff). Thanks
UPDATE:
Here is the back code showing suggested changes from below:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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;
using System.ComponentModel;
namespace ConverterApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new Variables();
}
}
public class Variables : INotifyPropertyChanged
{
// Declare the PropertyChanged event.
public event PropertyChangedEventHandler PropertyChanged;
private double m_distanceBox;
public double DistanceBox
{
get { return m_distanceBox; }
set
{
m_distanceBox = value;
// modify calc to read the text values
Calc();
// Call NotifyPropertyChanged when the source property
// is updated.
NotifyPropertyChanged("DistanceBox");
}
}
private double m_widthBox;
public double WidthBox
{
get { return m_widthBox; }
set
{
m_widthBox = value;
// modify calc to read the text values
Calc();
// Call NotifyPropertyChanged when the source property
// is updated.
NotifyPropertyChanged("WidthBox");
}
}
private double m_lengthBox;
public double LengthBox
{
get { return m_lengthBox; }
set
{
m_lengthBox = value;
// modify calc to read the text values
Calc();
// Call NotifyPropertyChanged when the source property
// is updated.
NotifyPropertyChanged("LengthBox");
}
}
private double m_lensBox;
public double LensNeeded
{
get { return m_lensBox; }
set
{
m_lensBox = value;
// modify calc to read the text values
Calc();
// Call NotifyPropertyChanged when the source property
// is updated.
NotifyPropertyChanged("LensNeeded");
}
}
public void Calc()
{
double WidthBased = 2.95 * (DistanceBox / WidthBox);
double LengthBased = 3.98 * (DistanceBox / LengthBox);
if (WidthBased < LengthBased)
{
LensNeeded = Math.Round(WidthBased,2);
}else{
LensNeeded = Math.Round(LengthBased,2);
}
}
// NotifyPropertyChanged will raise the PropertyChanged event,
// passing the source property that is being updated.
public void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this,
new PropertyChangedEventArgs(propertyName));
}
}
}
}
**ERROR I'm now getting is the StackOverflowException on the get {} inside the double functions. Any ideas?
The exception is thrown because the line
Text="{x:Static c:Variables.DistanceBox}"
is effectively something like
textBox.Text = Variables.DistanceBox;
This wouldn't compile in C#. In XAML, it throws exception. What you should do instead is create properties from your fields:
public double DistanceBox { get; set; }
And set Variables as DataContext of your window, by adding
DataContext = new Variables();
to the constructor of your window (or handler of the Loaded event).
You then use bindings in your XAML (which uses a converter to make strings out of doubles):
Text="{Binding DistanceBox}"
To call Calc() whenever a value changes, you can change the property to
private double m_distanceBox;
public double DistanceBox
{
get { return m_distanceBox; }
set
{
m_distanceBox = value;
Calc();
}
}
To make sure changes in Variables are reflected in the text boxes, you should implement the INotifyPropertyChanged interface.
EDIT: C# code of MainWindow:
public partial class MainWindow
{
public MainWindw()
{
InitializeComponent();
DataContext = new Variables();
}
}
Do you want to set text ? In wpf you need to use invoke method insted of of setting direct text property.
Your make mistake in setting text values:
YourTextBox.Text=YourValue;
in your case:
LensNeeded.Text = WidthBased.ToString();
You should use data binding for your text boxes.
Modify your Variables class to exposes the 4 values as string properties (you cannot databind to fields, only properties):
public class Variables
{
// code as in your example
public string LensValueNeeded
{
get { return LensNeeded.ToString(); }
set { Calc(); } // modify calc to read the text values
}
/// same for the other 3 values
}
Make sure that you modify your Calc method to read the current values from the TextBox as the data binding is setup to be two-way. You will need to convert the string values back to a double using the double.Parse() method:
double d = double.Parse(stringValue);
Set the DataContext of your Grid to an instance of your Variables class
Bind the text of your TextBox to the string property:
Text = {Binding LensNeededValue}
Related
I'm very new to WPF and currently learning the concepts of data binding.
my simplified XAML code. besides my problem (below) it works fine - quick and dirty placing of objects via GUI, will be cleaned up once works:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
</Grid>
<Grid Grid.Row="1">
<GroupBox Header="Change Type:" Height="95" Width="100" VerticalAlignment="Top" Margin="270,4,422,0" >
<StackPanel>
<RadioButton x:Name="RbtAdd" HorizontalAlignment="Left" Margin="5" VerticalAlignment="Top" GroupName="modGroup" Checked="ModeRadio_Checked">
<WrapPanel>
<TextBlock Text="Add" Foreground="Green"/>
</WrapPanel>
</RadioButton>
<RadioButton x:Name="RbtPull" HorizontalAlignment="Left" Margin="5" VerticalAlignment="Top" GroupName="modGroup" Checked="ModeRadio_Checked">
<WrapPanel>
<TextBlock Text="Pull" Foreground="Blue"/>
</WrapPanel>
</RadioButton>
<RadioButton x:Name="RbtModify" HorizontalAlignment="Left" Margin="5" VerticalAlignment="Top" GroupName="modGroup" Checked="ModeRadio_Checked">
<WrapPanel>
<TextBlock Text="Modify" Foreground="DarkGray"/>
</WrapPanel>
</RadioButton>
</StackPanel>
</GroupBox>
<TextBlock x:Name="txtCurStock" HorizontalAlignment="Left" Margin="330,181,0,0" TextWrapping="Wrap" Text="{Binding Path=CurrentStock}" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" TextAlignment="Center"/>
<Label Content="Current stock:" HorizontalAlignment="Left" Margin="289,156,0,0" VerticalAlignment="Top"/>
<Label x:Name ="lblOperation" Content="Stock to Pull:" HorizontalAlignment="Left" Margin="507,156,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtEntry" HorizontalAlignment="Left" Height="32" Margin="489,181,0,0" TextWrapping="Wrap" TextAlignment="Center" Text="{Binding Path=ModEntry}" VerticalAlignment="Top" Width="120" FontSize="20" FontWeight="Bold" TextChanged="TxtEntry_TextChanged"/>
<Label Content="New Stock" HorizontalAlignment="Right" Margin="714,156,0,0" VerticalAlignment="Top" Width="68"/>
<TextBlock Text="{Binding Path=NewStock}" HorizontalAlignment="Right" Margin="0,186,10,0" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" Width="68"/>
<TextBox x:Name="txtComment" HorizontalAlignment="Left" Height="86" Margin="289,233,0,0" TextWrapping="Wrap" Text="{Binding Path=ModEntry}" VerticalAlignment="Top" Width="493"/>
<Label Content="Comment:" HorizontalAlignment="Left" Margin="289,207,0,0" VerticalAlignment="Top"/>
<TextBlock x:Name ="txtModindicator" HorizontalAlignment="Left" Margin="433,181,0,0" TextWrapping="Wrap" Text="-" FontSize="20" FontWeight="Bold" VerticalAlignment="Top"/>
<TextBlock x:Name ="txtResindicator" HorizontalAlignment="Left" Margin="663,182,0,0" TextWrapping="Wrap" Text="=" FontSize="20" FontWeight="Bold" VerticalAlignment="Top"/>
</Grid>
</Grid>
now the shortened c# code:
using System.Windows;
using System.Windows.Controls;
using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace SomeWPF
{
/// <summary>
/// Interaction logic for ModifyWindow.xaml
/// </summary>
public partial class MainWindow : INotifyPropertyChanged
{
public enum Mymode
{
add,
pull,
modify
}
public Mymode mode;
public MainWindow()
{
DataContext = this;
InitializeComponent();
CurrentStock = 5;
RbtPull.IsChecked = true;
ModEntry = 1;
}
private void ModeRadio_Checked(object sender, RoutedEventArgs e)
{
if (sender != null)
{
if (sender.Equals(RbtAdd))
{
mode = Mymode.add;
txtModindicator.Text = "+";
txtComment.Text = "Add";
lblOperation.Content = "Stock to Add:";
}
else if (sender.Equals(RbtPull))
{
mode = Mymode.pull;
txtModindicator.Text = "-";
txtComment.Text = "Pull";
lblOperation.Content = "Stock to Pull:";
}
else
{
mode = Mymode.modify;
txtModindicator.Text = "~";
lblOperation.Content = "Corrected Quantity:";
txtComment.Text = "Mod";
}
TxtEntry_TextChanged(sender, null);
}
}
private void TxtEntry_TextChanged(object sender, TextChangedEventArgs e)
{
if (mode == Mymode.add)
{
NewStock = CurrentStock + ModEntry;
}
else if (mode == Mymode.pull)
{
NewStock = CurrentStock - ModEntry;
}
else
{
NewStock = ModEntry;
}
}
#region Binding Stuff
private int _newstock;
public int NewStock
{
get
{
return _newstock;
}
set
{
if (_newstock != value)
{
_newstock = value;
OnPropertyChanged();
}
}
}
private int _modentry;
public int ModEntry
{
get
{
return _modentry;
}
set
{
if (_modentry != value)
{
_modentry = value;
OnPropertyChanged();
}
}
}
private int _currentstock;
public int CurrentStock
{
get
{
return _currentstock;
}
set
{
if (_currentstock != value)
{
_currentstock = value;
OnPropertyChanged();
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
}
So this window is a popup in a little program for an inventory storage for the users to enter movements of the inventory.
everything loads fine so far and I now wanted to do the quite simple calculation part. with "old" winforms c# you'd just take the values and update the text property of the result "manually" but of course we (I) want to learn new stuff and do stuff with data binding.
The code also does the calculation, but the trigger is somehow not what I want.
let's say current stock is 5
when window loads, the mode is set to Pull (RbtPull) and the user entry (Binding to ModEntry) is set to 1 via code. The NewStock therefore should be 4 which displays correctly. (yey)
Also the comment field (for debugging for now) displays the ModEntry value 1.
so far so good.
Now I enter 3 in the Stock to Pull field, but nothing happens. (I want it to react "realtime"). The new Stock is still displayed as 4, the comment is still displayed as 1.
When I leave the field (and click into the comment field) - the property change is detected and the Comment Field shows also 3 (=ModEntry) - so it's not "realtime" but only triggers when the field is losing focus, but that would be also acceptable.
The real problem is: The new Stock stays 4 and does not calculate.
Now when I enter the Stock to Pull field again and change the value to let's say 5, the New Stock field updates to 2 (so to the value I entered before 5-3=2)
Overwriting the field with again 5 will change the new Stock to 0.
So it's always "one step behind".
From what I have found i have an idea, that I need some kind of Binding Converter instead of my method of calculating things, but I can't really find anything suitable and am not familiar enough yet with data binding. Have tried out some things already directly in the binding variable code but none worked. If anyone could hint me in the right direction I'd be very thankful. (don't need a silver plate solution but just an idea what way to search (e.g. if the sort of binding I use makes sense at all or if there's something I have to add etc.).
Thanks a lot!
PS: of course if someone is motivated to give a silver plate solution I'd also be grateful. :) - and sorry for the bad english, no native speaker.
#nosale 's second link (see comments) provided the answer to the Problem.
Setting both XAML fields txtEntry and the Result field to UpdateSourceTrigger=PropertyChanged solved the issue.
so the correct block Looks like this now without changes to the c# code:
<Label Content="Current stock:" HorizontalAlignment="Left" Margin="289,156,0,0" VerticalAlignment="Top"/>
<Label x:Name ="lblOperation" Content="Stock to Pull:" HorizontalAlignment="Left" Margin="507,156,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtEntry" HorizontalAlignment="Left" Height="32" Margin="489,181,0,0" TextWrapping="Wrap" TextAlignment="Center" Text="{Binding Path=ModEntry, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="120" FontSize="20" FontWeight="Bold" TextChanged="TxtEntry_TextChanged"/>
<Label Content="New Stock" HorizontalAlignment="Right" Margin="714,156,0,0" VerticalAlignment="Top" Width="68"/>
<TextBlock Text="{Binding Path=NewStock, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Right" Margin="0,186,10,0" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" Width="68"/>
<TextBox x:Name="txtComment" HorizontalAlignment="Left" Height="86" Margin="289,233,0,0" TextWrapping="Wrap" Text="{Binding Path=ModEntry}" VerticalAlignment="Top" Width="493"/>
<Label Content="Comment:" HorizontalAlignment="Left" Margin="289,207,0,0" VerticalAlignment="Top"/>
Reason is, that textboxes have a Default UpdateSourceTrigger=LostFocus and not PropertyChanged to prevent updates with user having entered typos.
something new learned: WPF is cool and automatically handles non plausible values like null or strings and marks the field red! :)
thanks again for the links!
I have a predefined User Control from a third party library. I would like to cut off a region from this User Control and use it in the Main window. Clipping is easily done with the Clip property of a UIElement but then the resizing does not work for this single segment. Is it possible to cut from a UIElement or User Control and use only this region for measuring, resizing and rendering of the component?
Please see a sample below :
XAML
<Window x:Class="WpfStackOverflow.Window12"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfStackOverflow"
Title="Window12" Height="300" Width="600">
<Canvas>
<Button Content="Press" Height="35" Width="75" Canvas.Left="29" Canvas.Top="43" Click="Button_Click_1">
<Button.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF62CFB6" Offset="0"/>
<GradientStop Color="#FFEBEBEB" Offset="0.5"/>
<GradientStop Color="#FF91B3E4" Offset="0.391"/>
<GradientStop Color="#FFF11278" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
<Button.Clip>
<GeometryGroup>
<EllipseGeometry RadiusX="50" RadiusY="25"/>
<RectangleGeometry Rect="55 20 75 35"/>
</GeometryGroup>
</Button.Clip>
</Button>
<Path x:Name="Pth" Width="75" Height="35" Fill="AliceBlue" Canvas.Top="80" Canvas.Left="300" Stretch="None" Stroke="#FF7C4444" Data=""/>
<Thumb Width="10" Height="10" Canvas.Left="217" Canvas.Top="34" DragDelta="Thumb_DragDelta_1"/>
<TextBlock Canvas.Left="217" TextWrapping="Wrap" Text="Drag this Thumb to right" Canvas.Top="10"/>
<TextBlock Canvas.Left="10" TextWrapping="Wrap" Text="Click this button" Canvas.Top="10"/>
</Canvas>
</Window>
CODE
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;
namespace WpfStackOverflow
{
/// <summary>
/// Interaction logic for Window12.xaml
/// </summary>
public partial class Window12 : Window
{
public Window12()
{
InitializeComponent();
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
var c = VisualTreeHelper.GetClip(sender as Button);
Pth.Data = c;
}
double scaleX=1, scaleY=1;
private void Thumb_DragDelta_1(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (Pth.LayoutTransform == null)
Pth.LayoutTransform = new ScaleTransform(1, 1);
scaleX += e.HorizontalChange;
scaleY += e.HorizontalChange;
Pth.LayoutTransform = new ScaleTransform(scaleX, scaleY);
System.Diagnostics.Debug.WriteLine((1 + e.HorizontalChange).ToString());
Thickness margin = (sender as Thumb).Margin;
(sender as Thumb).Margin = new Thickness(margin.Left + e.HorizontalChange, margin.Top, margin.Right, margin.Bottom);
}
}
}
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.
I have a list picker when clicking on the control to select another item it seems to look like it is going to work but is all white I can sometimes get it to select another item but cant see what is selected until you are off of it. This is how I have it set up. When I set it to full mode the name space is the only thing that shows not the actual name of the item. All I am trying to do is upon loading the view I need to load the listPicker with values.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Name="PickerItemTemplate" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding TankTypeName}" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Name="PickerFullModeItemTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding TankTypeName}" Style="{StaticResource PhoneTextNormalStyle}" FontFamily="{StaticResource PhoneFontFamilyLight}"/>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox Height="72" HorizontalAlignment="Left" Margin="0,50,0,0" Name="TextBoxProjectName" Text="" VerticalAlignment="Top" Width="456" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,28,0,0" Name="TextBlockProjectName" Text="Tank Name:" VerticalAlignment="Top" />
<toolkit:ListPicker Header="Tank Type:" ItemsSource="{Binding TankTypes}"
ItemTemplate="{StaticResource PickerItemTemplate}"
FullModeItemTemplate="{Binding PickerFullModeItemTemplate}"
SelectedItems="{Binding SelectedTankTypes,Mode=TwoWay}"
Height="100" HorizontalAlignment="Left"
Margin="6,144,0,0" Name="ListPickerTankType"
VerticalAlignment="Top" Width="444" >
</toolkit:ListPicker>
</Grid>
View Model
private List<TankType> _tankType;
private ObservableCollection<Object> _selectedTankType= new ObservableCollection<object>();
/// <summary>
/// Collection of Tank Type objects.
/// </summary>
public List<TankType> TankTypes
{
get
{
return _tankType;
}
set
{
if (value != _tankType)
{
_tankType = value;
NotifyPropertyChanged("TankType");
}
}
}
public ObservableCollection<object> SelectedTankTypes
{
get
{
return _selectedTankType;
}
set
{
if (_selectedTankType == value)
{
return;
}
_selectedTankType = value;
NotifyPropertyChanged("SelectedTankTypes");
}
}
This is a edit page so in the constructor of the view.
public TaskDetail()
{
InitializeComponent();
var tankTypeViewModel = new ViewModels.TankVewModel();
tankTypeViewModel.GetTankTypes();
ListPickerTankType.DataContext = tankTypeViewModel;
}
Revised OK I removed the height on the listpicker and now can see it made it bigger so the three items are there. I just cant seem to change the font color to black so I can see it when you click on the listpicker.
Figured it out. I needed to remove the height and set the foreground color to black.
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.