I have a data context class with complex fields (objects). Each object has a double and boolean field and some more fancy info. I also have two data templates, one for a double value to represent it as a slider and another one to represent a bool field as check box. How do I write the xaml to use the two already existing data templates I have? The problem is that the data context class can have fields which are not those objects containing a double and boolean value.
I am a newbie but I know how bindings and data context works.
Some code:
Class MyDataContext
{
public MyWpfField field1;
public WeirdField field1;
public MyWpfField field1;
public WeirdField field1;
}
Class MyWpfField
{
public string niceName;
public bool isEnable;
public double data;
.
.
.
}
Some xaml:
<DataTemplate x:Key="DataBoolTmpl">
<StackPanel
Margin="{StaticResource DefaultSpacing}"
Orientation="Horizontal"
ToolTip="{Binding ....}">
<CheckBox
IsEnabled="{Binding ...}"
Visibility="{Binding ...}"
IsChecked="{Binding ...}" />
<TextBlock Text="{Binding niceName}" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="DataTmplSlider">
<StackPanel
IsEnabled="{Binding ...}"
Margin="{StaticResource DefaultSpacing}"
ToolTip="{Binding ...}" >
<TextBlock Text="{Binding niceName}" />
<StackPanel Orientation="Horizontal"
Margin="{StaticResource DefaultSpacing}">
<TextBlock Text="{Binding ...}" MinWidth="40"/>
<TextBlock Text="{Binding ...}"/>
<Slider
Margin="5,0,0,0"
Visibility="{Binding ...}"
Minimum="{Binding ...}"
Maximum="{Binding ...}"
IsSnapToTickEnabled="True"
SmallChange="{Binding ...}"
MinWidth="100"
MinHeight="15">
<Slider.Value>
<Binding ...}"/>
</Slider.Value>
</Slider>
</StackPanel>
</StackPanel>
</DataTemplate>
Adapted from this answer: https://stackoverflow.com/a/755177/1783619
Use a ContentControl to utilize your data templates:
<ContentControl ContentTemplate="{StaticResource ..}" Content="{Binding MyField}"/>
You'll create one for each field. For more information, see MSDN.
Related
I am struggling to bind my user-defined tooltip to the items of a TreeView.
This is the XAML inside the TreeView: as you can see I bind my HierarchicalDataTemplate to the GroupWrapper (simple Class that exposes the properties Name and Children) and the DataTemplate to the DocWrapper (again, simple Class that has properties such as Name, Icon, BsonContent).
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type tmistruct:GroupWrapper}" ItemsSource="{Binding Children}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type tmistruct:DocWrapper}" >
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Icon}"/>
<TextBlock Text="{Binding Name}" Tag="{Binding BsonContent}" VerticalAlignment="Center" Style="{StaticResource TreeViewTextboxItemStyle}"/>
<StackPanel.ToolTip>
<local:MyDocTooltip
NameField="{Binding Name}"/>
</StackPanel.ToolTip>
</StackPanel>
</DataTemplate>
</TreeView.Resources>
It all works great! The Tree is automatically populated with the correct text and icons for all nodes BUT... my user-defined tooltip doesn't get the memo. The tooltip shows, but the name field is not populated. Note that if I replace
<local:MyDocTooltip
NameField="{Binding Name}"/>
with:
<local:MyDocTooltip
NameField="TESTSTRING"/>
The test string is correctly displayed in the Tooltip.
This is what my user-defined tooltip looks like:
namespace MyControls
{
/// <summary>
/// Interaction logic for MyDocTooltip.xaml
/// </summary>
public partial class MyDocTooltip : UserControl
{
public MyDocTooltip()
{
InitializeComponent();
DataContext = this;
}
public static readonly DependencyProperty NameFieldProperty = DependencyProperty.Register("NameField", typeof(string), typeof(MyDocTooltip));
public string NameField
{
get { return (string)GetValue(NameFieldProperty); }
set { SetValue(NameFieldProperty, value); }
}
}
}
I guess something to do with my tooltip's data context being set to its own ViewModel? I've been trying with relative references but with no luck. Any help appreciated! Cheers.
OK my whole setup was wrong. (Thanks #ASh)
For those out there who are struggling with similar issues:
Each user control should not set its DataContext property!
This should be inherited.
What you do inside each user control, is to bind each element to its UserControl ancestor.
So, inside MyDocTooltip.xaml each element will be defined like this (bound to NameField property):
<TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=NameField}"/>
Then I do the same in the TreeView (which is also inside a user control):
<TreeView x:Name="treeViewCollection" Grid.Row="2" Grid.ColumnSpan="2" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=FilteredGroups, UpdateSourceTrigger=PropertyChanged}" >
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type tmistruct:GroupWrapper}" ItemsSource="{Binding Children}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
<DataTemplate x:Name="TreeViewDataTemplate" DataType="{x:Type tmistruct:DocWrapper}" >
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Icon}"/>
<TextBlock Text="{Binding Name}" Tag="{Binding BsonContent}" VerticalAlignment="Center"/>
<StackPanel.ToolTip>
<local:MyDocTooltip
NameField="{Binding Name}"
/>
</StackPanel.ToolTip>
</StackPanel>
</DataTemplate>
</TreeView.Resources>
</TreeView>
And it all seems to work fine. Please do let me know if I'm still doing it wrong. Thanks for the help.
I have the following code that creates a TabControl. Each tab contains a UserControl (code is below) that displays different data (one shows Local tax info and the other show Fed/State tax info).
TabControl
<TabControl
Name="MappingTabs"
Margin="6,7,7,8" Padding="6"
Background="White" >
<TabItem
Name="LocalTaxTab"
Padding="6,1"
Header="Local">
<AdornerDecorator>
<DockPanel>
<Border Margin="7">
<GroupBox
Name="LocalTaxesGroup">
<GroupBox.Header>
<TextBlock
FontWeight="Bold"
Text="Local Taxes">
</TextBlock>
</GroupBox.Header>
<StackPanel Margin="20,8,10,0"
Orientation="Vertical">
<local:TaxCodeMappingHeader />
<!-- Note that a row is 25 high, -->
<ScrollViewer
MaxHeight="250"
>
<ItemsControl
Name="LocalTaxCodeMappingControl"
ItemTemplate="{StaticResource MappingRuleTemplate}"
BorderThickness="0"
AlternationCount="2"
IsTextSearchEnabled="False"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding TaxCodesCollection[0].CodeCollection, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}">
<!-- ItemsSource="{Binding Source={StaticResource sortedCodeCollection}}"> -->
</ItemsControl>
</ScrollViewer>
<local:TaxCodeMappingFooter DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</StackPanel>
</GroupBox>
</Border>
</DockPanel>
</AdornerDecorator>
</TabItem>
<TabItem
Name="FedStateTaxesTab"
Padding="6,1"
Header="Federal\State">
<AdornerDecorator>
<DockPanel>
<Border Margin="7">
<GroupBox
Name="FedStateTaxesGroup">
<GroupBox.Header>
<TextBlock
FontWeight="Bold"
Text="Federal \ State Taxes">
</TextBlock>
</GroupBox.Header>
<StackPanel Margin="20,8,10,0"
Orientation="Vertical">
<local:TaxCodeMappingHeader />
<!-- Note that a row is 25 high, -->
<ScrollViewer
MaxHeight="250"
>
<ItemsControl
Name="FedStateTaxCodeMappingControl"
ItemTemplate="{StaticResource MappingRuleTemplate}"
BorderThickness="0"
AlternationCount="2"
IsTextSearchEnabled="False"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding TaxCodesCollection[1].CodeCollection, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}">
<!-- ItemsSource="{Binding Source={StaticResource sortedCodeCollection}}"> -->
</ItemsControl>
</ScrollViewer>
<local:TaxCodeMappingFooter DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</StackPanel>
</GroupBox>
</Border>
</DockPanel>
</AdornerDecorator>
</TabItem>
</TabControl>
</StackPanel>
UserControl (TaxCodeMappingFooter)
<Button
Name="AddButton"
Grid.Row="0"
Grid.Column="0"
Height="20" Width="20"
Command="{Binding Path=DataContext.AddClickCommand}"
CommandParameter="(want the tab name here)"
Style="{StaticResource ImageButton}"
ToolTip="Add a rule"
local:AttachedImage.Image="{StaticResource AddImageSource}" />
The UserControl (TaxCodeMappingFooter) contains an Add button that I need to wire up via RelayCommand to the VM. I need to somehow tell the VM which tab is calling the Add command so that an item can be added to the correct collection. I thought about sending the TabName and then keying off that to know which tab the user is on.
Is my idea correct or is the a better way to do this and if it is correct how do I get the TabName value to pass it back as a CommandParameter?
If you are going to hard code your UI controls as you have done, then perhaps your simplest option is to define a string DependencyProperty in your TaxCodeMappingFooter control:
public static readonly DependencyProperty TabNameProperty = DependencyProperty.
Register("TabName", typeof(string), typeof(TaxCodeMappingFooter));
public string TabName
{
get { return (string)GetTabName(TabNameProperty); }
set { SetTabName(TabNameProperty, value); }
}
Then you could set it from your TabItems:
<local:TaxCodeMappingFooter TabName="FedStateTaxesTab" DataContext="{Binding
RelativeSource={RelativeSource AncestorType=UserControl}}" />
And Bind to it from inside your control:
<Button Name="AddButton" Command="{Binding Path=DataContext.AddClickCommand}"
CommandParameter="{Binding TabName, RelativeSource={RelativeSource
AncestorType=TaxCodeMappingFooter}}" ... />
As others have said, if you model your view model structure appropriately, this would not be much of an issue.
If you really want to bind against an ancestor element, you can use a RelativeSource of FindAncestor, then specify the AncestorType. Note that you may need to tweak AncestorLevel if you are the descendant of more than one TabItem.
{Binding Path=Name
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type TabItem}}}
(wrapping added for clarity)
I have a custom ItemTemplate for a ListBox and I need to "bind" a TextBlock to some special method / property.
My ListBox Source is an ObservableCollection<SearchResultItem>. SearchResultItem containing some properties.
The text need to change based on the value of another object. E.G if this object equals "foo" I need the text value to call the method GetProperty("foo") on the SearchResultItem to get the correct value.
Here is a sample of code:
<DataTemplate>
..
//Here is a Label bound to the Date Property of the SearchResultItem
<Label Margin="2,2,2,0" Grid.Row="0" Grid.Column="2" Content="{Binding Path=Date}" HorizontalAlignment="Right" HorizontalContentAlignment="Right" />
//Here is the textblock that needs to call the method with the parameter based on the value of the other object.
<TextBlock Margin="2,2,2,0" TextTrimming="CharacterEllipsis" Grid.Row="0" Grid.Column="1" Text="I need some help there" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black"/>
..
</DataTemplate>
Do you have any idea on how to do that or a better way to do it?
Edit:
-Let's assume SearchResultItem comes from an external library and only exposes the GetProperty method.
-Let's say the "foo" value comes from ConfigurationManager.AppSettings["propertyName"]; if it helps.
OK, because your properties never change, here's one solution. You can do this via another property on your SearchResultItem class:
public string MyTextBinding
{
get
{
return myDictionary.ContainsKey("foo") ? return myDictionary["foo"] : return "myDictionary doesn't contain foo";
}
}
Then just bind your textbox to this property:
<DataTemplate>
<Label Margin="2,2,2,0" Grid.Row="0" Grid.Column="2" Content="{Binding Path=Date}" HorizontalAlignment="Right" HorizontalContentAlignment="Right" />
<TextBlock Margin="2,2,2,0" TextTrimming="CharacterEllipsis" Grid.Row="0" Grid.Column="1" Text="{Binding Path=MyTextBinding, Mode=OneWay}" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black"/>
</DataTemplate>
Just use a IValueConverter that takes a SearchResultItem and return the expected text
<TextBlock Margin="2,2,2,0" TextTrimming="CharacterEllipsis"
Grid.Row="0" Grid.Column="1"
Text="{Binding Path=.,
Converter={StaticResource PropertyValueFromSearchResultItemConverter},
ConverterParameter=Foo}"
HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black"/>
I'm trying to make a budget program. Where I need to have groupboxes with a list of textblocks inside.
<ItemsControl DataContext="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<GroupBox Header="{Binding}">
<ItemsControl DataContext="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Text}" />
<TextBlock Text="{Binding Value}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</GroupBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I need somehow to databind a list (perhaps?) with groupboxes so I'd create a list of group boxes, with some lines inside that would be a text with a currency value. So that I could create a group called "Apartment", with two lines "Rent $3000" and "Maintenance $150". Then I could have a second group called "Car" with lines "Insurance", "Loan" and "Maintenance" for instance.
But how would I databind this? And how would I need in C# to perform this. I'm at a loss.
Building off of Jay's comment, you would want to create a Hierarchical data model. Note I have left implementing INotifyPropertyChanged on the properties to you
public class BudgetLineItem : INotifyPropertyChanged
{
public string Name { get; set; }
public decimal Cost { get; set; }
}
public class BudgetGroup : INotifyPropertyChanged
{
public string GroupName { get; set; }
public ObservableCollection<BudgetLineItem> LineItems { get; set; }
}
public class BudgetViewModel : INotifyPropertyChanged
{
public ObservableCollection<BudgetGroup> BudgetGroups { get; set; }
}
Then your data-template would look like this:
<ItemsControl DataContext="{Binding ViewModel}"
ItemsSource="{Binding BudgetGroups}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<GroupBox Header="{Binding GroupName}">
<ItemsControl ItemsSource="{Binding LineItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Cost}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</GroupBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I could be off base here, but it sounds like you want to change the DataTemplate based on the type of object that is being bound from a list of heterogeneous objects.
If that's the case, you want to look into DataTemplateSelectors or create DataTemplates for each of the types you want to support in the list.
For example, for an Apartment you might have:
<DataTemplate DataType="local:ApartmentBudget">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Text}" />
<TextBlock Text="{Binding Value}" />
</StackPanel>
</DataTemplate>
a Car may look like:
<DataTemplate DataType="local:CarBudget">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Insurance}" />
<TextBlock Text="{Binding Loan}" />
<TextBlock Text="{Binding Maintenance}" />
</StackPanel>
</DataTemplate>
Then your ItemsControl can be set like:
<ItemsControl ItemSource="{Binding BudgetItems}">
The correct DataTemplate will be picked based on the data type. You can have even more control by creating a custom DataTemplateSelector.
See https://msdn.microsoft.com/en-us/library/ms742521(v=vs.100).aspx for more information.
Any idea where I'm going wrong with this code. I want the TextBox to be Enabled when the associated RadioButton for it is selected, and then when a different radio button is selected I want it to be Enabled=False. I created a ProxyMode dependency property and have changed the getter to obtain it's bool value based on whether Proxy is selected or not. Doesn't seem to work...any ideas?
// Proxy Host Name
public string Proxy
{
get { return (string)GetValue(ProxyProperty); }
set { SetValue(ProxyProperty, value); }
}
public static readonly DependencyProperty ProxyProperty =
DependencyProperty.Register("Proxy", typeof(string), typeof(ConfigWindowViewModel), new UIPropertyMetadata("[e.g. proxy.mycompany.com]"));
public bool ProxyMode
{
get { return Proxy == "Proxy"; }
set { SetValue(ProxyModeProperty, value); }
}
public static readonly DependencyProperty ProxyModeProperty =
DependencyProperty.Register("ProxyMode", typeof(bool), typeof(ConfigWindowViewModel));
And the XAML
<StackPanel Grid.Column="0" Margin="2">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<RadioButton IsChecked="{Binding Path=Mode, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Proxy}"
VerticalAlignment="Center"
Padding="2,0,10,0">Proxy
</RadioButton>
<TextBox Text="{Binding Path=Proxy}"
IsEnabled="{Binding Path=ProxyMode}"
Width="Auto"
Name="ProxyHostTextBox"
VerticalAlignment="Center"
MinWidth="150"
/>
</StackPanel>
<RadioButton IsChecked="{Binding Path=Mode, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Direct}">Direct</RadioButton>
</StackPanel>
The easiest way to enable/disable the textbox based on whether the proxy RadioButton is checked is to bind the IsEnabled property of the TextBox directly to the IsChecked property of the proxy RadioButton. Assuming the proxy RadioButton is named "proxy":
<TextBox Text="{Binding Path=Proxy}" IsEnabled="{Binding ElementName=proxy, Path=IsChecked}"/>
If you meant for your RadioButton controls to be linked so that only one can be selected at once, you need to set the GroupName property to something on both of them (it should be the same for all linked RadioButton controls).
Let me know if you have further questions.
As with the second version of this question:
<RadioButton x:Name="RadioButton2" />
<TextBox IsEnabled="{Binding IsChecked, ElementName=RadioButton2}" />
think I came up with a better way to do this - so the question probably isn't a good one to ask - the following without dependency property seem ok
<StackPanel Grid.Column="0" Margin="2">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<RadioButton IsChecked="{Binding Path=Mode, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Proxy}" VerticalAlignment="Center" Padding="2,0,10,0" Name="ProxyModeRadioButton">Proxy</RadioButton>
<TextBox Text="{Binding Path=Proxy}"
IsEnabled="{Binding ElementName=ProxyModeRadioButton, Path=IsChecked}"
Width="Auto" Name="ProxyHostTextBox" VerticalAlignment="Center" MinWidth="150"
/>
</StackPanel>
<RadioButton IsChecked="{Binding Path=Mode, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Direct}">Direct</RadioButton>
</StackPanel>