Showing or hiding a control in WPF template based on bindings - wpf

I am new to WPF binding/templating. I have some basic questions about a templated TabControl I have as below :
<TabControl x:Name="tcTabs" ItemsSource="{Binding Rooms, UpdateSourceTrigger=PropertyChanged}" Grid.Row="1" Margin="5" BorderThickness="1" IsSynchronizedWithCurrentItem="True">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding Name}" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="130"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="22"/>
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Grid.Column="0" BorderThickness="0" ItemsSource="{Binding Messages}" DisplayMemberPath="Raw" />
<ListBox Grid.Row="0" Grid.Column="1" BorderThickness="1,0,0,0" BorderBrush="#FFBBBBBB" ItemsSource="{Binding Users}" DisplayMemberPath="Nick" />
<TextBox Grid.Row="1" Grid.ColumnSpan="2" BorderThickness="0,1,0,0" BorderBrush="#FFBBBBBB" Height="22" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
The TabControl contains in each tab 2 list boxes and a textbox. One of the listboxes contains user names is is not necessary all the time.
There are 3 kinds of tabs, Server tabs, room tabs and private tabs. In private and server tabs the user list should not exist or be hidden.
I have an enum on the bound room object :
public enum IRCRoomType
{
Server,
Channel,
Private
}
How do I automatically hide the user list based on the enum, I have seen samples of 2 approaches, the binding on visibility with a converter or a trigger. Which is the better approach and are there any more?
When there are no tabs, and the first tab is created it is not automatically selected, how do I select it?
Is there a way of impacting the item styles inside the listboxes depending on tab type? How would I acheive this?
I am just looking for links/hints and not for actual solutions, but if you can give code then that would be a bonus!

It depends on how complicated code. If it's simple I rather use Trigger (you have everything which belows to UI in XAML), but if code is much more complicated consider using Converters (It's actually simpler to use it)
Bind to SelectedIndex of List and set it to 0?
Yes, of course, you can use ContentControl with DataTemplate (Or just DataTemplate in some cases) Some code where I use it:
<ListBox>
<ListBox.Resources>
<DataTemplate DataType="{x:Type your_namespace:your_type}">
... your code ...
</DataTemplate>
<DataTemplate DataType="{x:Type system:String}">
... your code ...
</DataTemplate>
</ListBox.Resources>
</ListBox>
Code you posted is actually a new Template, but you've changed the Style. Please consider override some Template.
Best regards

Related

How to set ItemsSource of a ComboBox, if it was present in an ItemsCotrol

ComboBox items were not displaying, if we try to keep that combobox in an ItemsCotrol. Please click here for understanding my requirement
My requirement is to keep a combobox in an ItemsControl, so that the ItemsControl qill be having 5 Comboboxes in it and each combox will be having a collection of items which we can select. So for that i tried with the below code and able to get the comboboxes in the ItemsControl, but the comboboxes collection is getting filled, any suggestions or workaround please..
<xamDataPresenter:Field Label="Reqs" BindingType="Unbound" Row="0" Column="4">
<xamDataPresenter:Field.CellValuePresenterStyle>
<Style TargetType="{x:Type xamDataPresenter:CellValuePresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xamDataPresenter:CellValuePresenter}">
<ItemsControl Name="I" ItemsSource="{Binding Path=DataItem.CollectionCount}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Path=DataItem.Collection}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</xamDataPresenter:Field.CellValuePresenterStyle>
</xamDataPresenter:Field>
Ok, I've written up the most basic of ItemsControl to try and explain how these things work, which you can hopefully adapt for whatever your using for your dataitems.
So in your window's resources i've created a datatemplate. This respresents a repeating step and will be based on a DataItem. In this case my DataItem has 2 properties: DataItemProperty(string) and SelectedItem. The SelectedItem will have the same DataType of whatever it is your planning on showing in the combobox.
<DataTemplate x:Key="StepTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<TextBlock Text="{Binding Path=DataItemProperty}" Grid.Column="0"/>
<ComboBox Grid.Column="1" ItemsSource="{Binding Path=DataContext.ItemsToSelectFrom, Mode=OneWay, RelativeSource={RelativeSource AncestorType=Window}}"
SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</DataTemplate>
The combobox in this example will be getting a list of available options from the code behind/viewmodel and not the DataItem, but when you select something it updates the SelectedItem property on the DataItem.
Then to show your items:
<ItemsControl
Focusable="False"
ItemTemplate="{StaticResource StepTemplate}"
ItemsSource="{Binding Path=Steps, Mode=OneWay}" />
So Steps is a property in my codebehind/viewmodel that will determine how many 'rows' get displayed.
The itemsControl allows you to add repeating sets of data easily, without having to write the same xaml multiple times.
Hope that helps?

Partially templated ListBox.ItemTemplate

I'm creating a custom control and I'm trying to create partially specified template for list box items. The template has some predefined parts and there should be another part that can be templated when using the control.
For this I have created a dependency property named SuggestionItemTemplate like so:
public static readonly DependencyProperty SuggestionItemTemplateProperty =
DependencyProperty.Register("SuggestionItemTemplate",
typeof(DataTemplate),
typeof(AutoSuggestTextBox),
new PropertyMetadata(null));
In my custom controls' generic.xaml I have:
<Style TargetType="local:AutoSuggestTextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:AutoSuggestTextBox">
<Grid>
<ListBox x:Name="ItemsControl">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0"
ContentTemplate="{TemplateBinding SuggestionItemTemplate}"
Content="{Binding}" />
<ToggleButton Grid.Column="1"
x:Name="DetailsHover"
ClickMode="Hover"
Style="{StaticResource DetailsToggleButtonStyle}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Unfortunatelly, this does not work as it's not possible to use TemplateBinding from inside ContentPresenter nested into DataTemplate. (The member "SuggestionItemTemplate" is not recognized or is not accessible.)
I also tried to use ancestor binding (available in Silverlight 5) like:
<ContentPresenter Grid.Column="0"
ContentTemplate="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=local:AutoSuggestTextBox}, Path=SuggestionItemTemplate}"
Content="{Binding}" />
But this results in binding error:
Error: System.Exception: BindingExpression_CannotFindAncestor
I suppose this happens because I'm inside ControlTemplate of my custom control and "local:AutoSuggestTextBox" is not defined anywhere in the style.
The third option that I tried was to apply ContentTemplate in OnApplyTemplate override but this also doesn't work:
var cp = itemsControlElement.ItemTemplate.LoadContent() as ContentPresenter;
cp.ContentTemplate = SuggestionItemTemplate;
In all cases, I get my grid with two columns, toggle button is visible but content presenter simple prints out view model's type name. (I believe this is the default behavior if the ContentTemplate is null).
Is this even possible to do? Are there any other ways to specify a partial template and then only add customized template part when necessary?
As a workaround for now, I can specify
ItemTemplate="{TemplateBinding SuggestionItemTemplate}"
for the list box and then copy/paste the generic template everywhere I use this control. But this is the behavior I'm hoping to avoid in the first place.
Thanks!
edit: I used the code tags for all blocks of code, but they're not highlighted for some reason. :/
It is possible to walk through Visual Ancestors in the OnApplyTemplate method, find your ContentPresenter(s) and set the ItemTemplate on that. To my mind, this is fine for a single item, but not so much in an ItemsControl scenario.
You could achieve what you are after using your own custom Control. Just give it a Content dependency property of type Object, and a Template DP of type DataTemplate (and multiples of the two if you fancy), and you can set up the root visual style and templates in the default style for your Control.
In this specific case, I would suggest that the best approach is to put your ToggleButton in the ListBoxItem template instead by customising the ListBox.ItemContainerStyle. It is easy to modify the default Control Template using Expression Blend, and the DataContext of the ToggleButton will not change, so the changes to your own logic should be minimal.
Edit: If you mean to use a number of different data templates, perhaps Implicit Data Templates will be more suitable.
I managed to solve this using a different approach. I used ancestor binding but instead of trying to reach the root control (my AutoSuggestTextBox) from the DataTemplate, I ask for a reference to my ListBox (here named ItemsControl).
However, since the ListBox doesn't have the SuggestionItemTemplate property, I sub-classed it to my own CustomListBox where I implemented that property. It all comes down to this code snippet:
<Style TargetType="local:AutoSuggestTextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:AutoSuggestTextBox">
<Grid>
<local:CustomizableListBox x:Name="ItemsControl"
SuggestionItemTemplate="{TemplateBinding SuggestionItemTemplate}">
<local:CustomizableListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0"
ContentTemplate="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=local:CustomizableListBox}, Path=SuggestionItemTemplate}"
Content="{Binding}" />
<ToggleButton Grid.Column="1"
x:Name="DetailsHover"
ClickMode="Hover"
Style="{StaticResource DetailsToggleButtonStyle}" />
</Grid>
</DataTemplate>
</local:CustomizableListBox.ItemTemplate>
</local:CustomizableListBox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Designing a custom edit control similar to hotmail style "To" box

I am desiging a custom control for use in my application which simulates a hotmail style "To" textbox which lets the user enter semicolon delimited strings. The control behaves like a textbox, on each ener press or entering semicolon a box(a textblock infact) gets created containing text entered which can be manipulated individually.
The control is implemented by means of a listview with its ItemPresenter set to a WrapPanel
The XAML looks like below:
<ListView x:Name="col" ItemContainerStyle="{StaticResource ContainerStyle}">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<local:MyWrapPanel Orientation="Horizontal" MinWidth="400"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
<Style TargetType="{x:Type ListViewItem}" x:Key="ContainerStyle">
<Setter Property="ContentTemplate" Value="{StaticResource BoxView}" />
<Style.Triggers>
<Trigger Property="Tag" Value="Edit">
<Setter Property="ContentTemplate" Value="{StaticResource BoxViewEdit}" />
</Trigger>
</Style.Triggers>
</Style>
The control template for the listviewitems (boxes) looks like:
<DataTemplate x:Key="BoxView">
<Border BorderThickness="1" BorderBrush="Brown" Background="Beige" Margin="1,1,1,0" CornerRadius="6" >
<StackPanel Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Margin="5,5,5,0" Height="20" Text="{Binding XPath=''}"/>
<DockPanel Grid.Column="1" Grid.Row="0">
<Image Source="edit8.png" MouseLeftButtonUp="edit_MouseLeftButtonUp" ToolTip="Edit" Margin=" 10,0,0,0"></Image>
<Image Source="cancel8.png" MouseLeftButtonUp ="cancel_MouseLeftButtonUp" ToolTip="Remove" Margin=" 5,0,5,0"></Image>
</DockPanel>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
Actually the listview is data bound to a set of xmlnodes having common parent.
The look and feel of the control has to be given such that it looks like a text box.
Now, I have the listview items bound to the xml nodes of an xml document, to show the textbox I add an empty xmlnode in the document and change the control template of the coressponding listviewitem so that it shows as a textbox.
On pressing enter in the text box a new xml node gets appended to the underlying xml at second last position containing innertext set to the textbox text(last positon is dummy node)
The template used for textbox is:
<DataTemplate x:Key="BoxViewEdit">
<TextBox Margin="0,5,5,0" Background="White" MaxWidth="400" BorderThickness="1" Text="{Binding XPath=''}"/>
</DataTemplate>
But the idea of adding an empty dummy xmlnode in the underlying source xml so that i could simulate editing of the listview seems hacky. Is there any cleaner way of doing this.
What i want is to wrap the text box as shown in figure with the contents of the wrappanel seamlessly without adding it to the wrappanel itself by means of creating a dummy xmlnode.
I had the same issue and found some solutions; you can check out the responses and comments here.

How come I can only have one instance of a Silverlight UserControl per page?

Its pretty lame, but I tried adding two UserControl's to my Silverlight Page, and I get an exception telling me (with extensive digging) that the same control name has been used to the visual tree twice. So the controls inside my UserControl are named, so therefore I can include only one of this UserControl into the Page at a time. Is this true, or am I not realizing something? Has Microsoft truly given up on code-reuse? This is very lame.
Edits
For people who come here, I was getting this a System.Resources.MissingManifestResourceException exception. It took some time to figure out that the problem was ambiguous names in the visual tree. Hopefully this helps you. Below is the full exception text.
Further Edits
Here is my XAML:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="HeaderText"
res:Strings.Assignment="Text=MachiningView_Name"/>
<sdk:TabControl Grid.Row="2">
<sdk:TabItem Header="Projects">
<ScrollViewer>
<Grid>
<controls:Organizer Margin="4" ItemsSource="{Binding ProjectSummaries}" Height="24" VerticalAlignment="Top">
<controls:Organizer.GroupDescriptions>
<controls:OrganizerGroupDescription res:Strings.Assignment="Text=NoGroupingText" IsDefault="True" />
<controls:OrganizerGroupDescription res:Strings.Assignment="Text=GroupOwnerEmailText">
<controls:OrganizerGroupDescription.GroupDescription>
<helpers:OwnerEmailGroupDescription />
</controls:OrganizerGroupDescription.GroupDescription>
</controls:OrganizerGroupDescription>
<controls:OrganizerGroupDescription res:Strings.Assignment="Text=GroupStoreNumberText">
<controls:OrganizerGroupDescription.GroupDescription>
<helpers:StoreNumberGroupDescription />
</controls:OrganizerGroupDescription.GroupDescription>
</controls:OrganizerGroupDescription>
</controls:Organizer.GroupDescriptions>
</controls:Organizer>
</Grid>
</ScrollViewer>
</sdk:TabItem>
<sdk:TabItem Header="Machine Queues">
<ScrollViewer>
<Grid>
<controls:Organizer Margin="4" ItemsSource="{Binding ProjectSummaries}" Height="24" VerticalAlignment="Top">
<controls:Organizer.GroupDescriptions>
<controls:OrganizerGroupDescription res:Strings.Assignment="Text=NoGroupingText" IsDefault="True" />
<controls:OrganizerGroupDescription res:Strings.Assignment="Text=GroupOwnerEmailText">
<controls:OrganizerGroupDescription.GroupDescription>
<helpers:OwnerEmailGroupDescription />
</controls:OrganizerGroupDescription.GroupDescription>
</controls:OrganizerGroupDescription>
<controls:OrganizerGroupDescription res:Strings.Assignment="Text=GroupStoreNumberText">
<controls:OrganizerGroupDescription.GroupDescription>
<helpers:StoreNumberGroupDescription />
</controls:OrganizerGroupDescription.GroupDescription>
</controls:OrganizerGroupDescription>
</controls:Organizer.GroupDescriptions>
</controls:Organizer>
</Grid>
</ScrollViewer>
</sdk:TabItem>
</sdk:TabControl>
</Grid>
And here is my user control's XAML:
<StackPanel Orientation="Horizontal" DataContext="{Binding ElementName=UserControl}">
<sdk:Label Content="Page:" VerticalAlignment="Center" Margin="0,0,5,0"/>
<sdk:DataPager Name="_projectSummariesPager"
Margin="0,0,5,0"
DisplayMode="FirstLastPreviousNextNumeric"
Source="{Binding Path=ItemsSource}"
PageSize="10"/>
<ComboBox Name="_itemPerPageCombo"
Margin="0,0,5,0"
SelectionChanged="_itemPerPageCombo_SelectionChanged"
SelectedItem="{Binding Path=SelectedPageSize, Mode=TwoWay}"
SelectedValuePath="Value"
ItemsSource="{Binding Path=PageSizes}"/>
<ComboBox Name="_groupDescription"
Margin="0,0,5,0"
SelectionChanged="_groupDescription_SelectionChanged"
SelectedItem="{Binding Path=SelectedGroupDescription, Mode=TwoWay}"
ItemsSource="{Binding Path=GroupDescriptions}"/>
</StackPanel>
Names given to elements in Xaml need to be unique within the namescope. Each execution of LoadComponent creates a new namescope. Hence the names within the UserControl will not conflict in the visual tree when multiple instances of the control were used.
So the answer to question as it stands right now is: because you are doing something wrong.
What the "something" is is unclear right now. Perhaps if you included your xaml in the question we can help you.
Edit
So reading between the lines this is what I'm guessing you are doing. You have a UserControl that has a number for properties and you want controls within the UserControl to bind to these properties so you are doing this:-
<StackPanel Orientation="Horizontal" DataContext="{Binding ElementName=UserControl}">
This would indicate that you have added Name="UserControl" to the <UserControl.. element at the top of its xaml.
I can't quite find a way to reproduce your problem but I am aware of problems with earlier versions of SL where this approach is a problem. Personally I think its better to avoid setting properties that really belong to the external consumer of the component (its up to the page that is using you UserControl what its name is and whether it should have name at all).
Hence my approach to solve this "Bind to the UserControl itself" sort of Problem:-
<StackPanel Orientation="Horizontal" DataContext="{Binding ElementName=LayoutRoot.Parent}">
where LayoutRoot is the name of the top level Grid which is the root of the UserControl content. This still binds to the UserControl itself via the Grid's Parent property. However this does not require a name to be added to the UserControl itself in its own xaml.
When you add the UserControl, make sure to assign it a unique name, ie:
<Page ...
<StackPanel>
<local:YourUserControl x:Name="Foo" />
<!-- Make sure not to duplicate x:Name/Name here! -->
<local:YourUserControl x:Name="Bar" />
</StackPanel>
</Page>

How do I layout a form in WPF using grid or other controls for maintainability [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a WPF form, I want to lay out a standard form onto it. Each form element will have a label, and then a control. Pretty standard stuff.
If I use a wrap panel, it can cause the label and the control to be separated, but I want them to stay together. Is there some WPF equivalent of <nobr/>?
Grid works, and allows for column spanning etc, however I really really hate that you specify the column and row on each control. This makes it extremely inconvenient to reorder or insert things into the list.
Is there a way to get the grid to use more HTML style column/rows where the items are a child of the row they are in, so that I can re-order easily?
Is there some other control that will let me layout a form easily?
is there some WPF equivalent of nobr?
Remember that you can nest panels:
<WrapPanel Orientation="Horizontal">
<StackPanel Orientation="Horizontal">
<Label>Some field</Label>
<TextBox>Some value</TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label>Another field</Label>
<TextBox>Another value</TextBox>
</StackPanel>
...
</WrapPanel>
Also, for columnar layouts, the shared size scope of the Grid can coordinate any number of grids that use it:
<StackPanel Orientation="Vertical" Grid.IsSharedSizeScope="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some field</Label>
<TextBox Grid.Column="1">Some value</TextBox>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Another field</Label>
<TextBox Grid.Column="1">Another value</TextBox>
</Grid>
</StackPanel>
I kind of hate how verbose the XAML for this is, especially that you have to repeat the column definitions. Though if you structure your classes properly and use templates it's not so terrible. And notice that you aren't keep track of row numbers anywhere in this scheme, so reordering fields is simple.
What you might be looking for is a stack panel. Using a vertical StackPanel will allow you to arrange your label and controls consistently. For each label and control you might want a horizontal stack panel like so
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Label Width="150">Name</Label>
<TextBox Width="200" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Width="150">Date of Birth</Label>
<DatePicker Width="200" />
</StackPanel>
</StackPanel>
Now you can add, remove, edit, and reorder to your heart's content without worrying about columns and rows.
Try the UniformGrid control.
If you can accord it, I recommend Expression Blend if you are going to be doing much UI design. It allows a simpler view of the items. Nesting controls into various containers is a good way to get the UI to be dynamic, but structured.
Typically I will use a Grid panel to break a window up into functional areas. Then I will use a series of StackPanels (often a vertical stack panel with horizontal StackPanels inside it, each with a label and textbox).
Unfortunately Grids only work as you stated. Elements in them specify the row and/or column that they reside in. If you used Blend, adding Grid Columns or Rows will have controls auto-magically change the row/column specification to stay in the position they were placed.
Hope it helps.
Expression Blend Trial at Microsoft.
UPDATE:
VS2012 has a lot of the Expression Blend functionality baked into the WPF designer. Much of the need for a copy of Blend is no longer there as developers have access to a lot of the cool tools from Blend.
Here is a library for it
Sample xaml:
<UserControl ...
xmlns:autoRowGrid="http://gu.se/AutoRowGrid"
...>
<autoRowGrid:Grid ColumnDefinitions="Auto *">
<autoRowGrid:Row Name="first row">
<TextBlock Text="foo1" />
<TextBox Text="{Binding Value1}" />
</autoRowGrid:Row>
<autoRowGrid:Row Name="second row">
<TextBlock Text="foo2" />
<TextBox Text="{Binding Value2}" />
</autoRowGrid:Row>
</autoRowGrid:Grid>
...
It is a markupextension that returns a vanilla WPF Grid for a nice shallow visual tree.
I came across this post today while having the same question, using the answers in this thread I came up with a manageable solution to simple text/text pairs. To add new fields simply expand the "FormItems" collection.
xmlns:c="clr-namespace:System.Collections;assembly=mscorlib"
<Window.Resources>
<c:ArrayList x:Key="FormItems">
<c:DictionaryEntry Key="First Name" Value="John"/>
<c:DictionaryEntry Key="Last Name" Value="Smith"/>
</c:ArrayList>
</Window.Resources>
<ItemsControl ItemsSource="{StaticResource FormItems}" Grid.IsSharedSizeScope="True">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock>
<Run Text="{Binding Key}"/><Run Text=": "/>
</TextBlock>
<TextBox Grid.Column="1" Text="{Binding Value}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
There has been no consideration for margins and padding, it just shows the concept of using a DataTemplate to reuse the layout of each item. It can be adapted to include other data types and controls fairly easily. You could even use the ItemTemplateSelector to select a different template based on the type of the DictionaryEntry.Value
EDIT
Another approach that I found that made it easier for DataBinding was to use Visual Studio to create a new WPF "Custom Control". Doing so will create a new file named Themes/Generic.xaml with a new default layout defined there. A few simple edits and we can use the ItemsControl to display our new control.
New class:
public class FormControlItem : ContentControl
{
public object Field {
get { return base.GetValue(FieldProperty); }
set { base.SetValue(FieldProperty, value); }
}
static FormControlItem() {
DefaultStyleKeyProperty.OverrideMetadata(
typeof(FormControlItem),
new FrameworkPropertyMetadata(typeof(FormControlItem)));
}
public static readonly DependencyProperty FieldProperty =
DependencyProperty.Register(
"Field",
typeof(object),
typeof(FormControlItem),
new FrameworkPropertyMetadata());
}
Themes/Generic.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyApplication">
<Style TargetType="{x:Type local:FormControlItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:FormControlItem}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ContentPresenter ContentSource="Field"/>
<ContentPresenter Grid.Column="1" ContentSource="Content"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Usage example:
<ItemsControl Grid.IsSharedSizeScope="True">
<local:FormControlItem Field="Name: ">
<TextBox Text="{Binding Path=Name}"/>
</local:FormControlItem>
<local:FormControlItem Field="Type: ">
<ComboBox
SelectedItem="{Binding Path=Type}"
ItemsSource="{Binding Path=TypeValues}"/>
</local:FormControlItem>
<local:FormControlItem Field="Category: ">
<TextBox Text="{Binding Path=Category}"/>
</local:FormControlItem>
</ItemsControl>
Check out Karl's stuff.
http://web.archive.org/web/20150620104259/https://karlshifflett.wordpress.com/2008/10/23/wpf-silverlight-lob-form-layout-searching-for-a-better-solution/
Simple and clean xaml:
<pt:Form x:Name="formMain" Style="{DynamicResource standardForm}" Grid.Row="1">
<TextBox pt:FormItem.LabelContent="_First Name" />
<TextBox pt:FormItem.LabelContent="_Last Name" />
<TextBox pt:FormItem.LabelContent="_Phone" Width="150" HorizontalAlignment="Left" />
<CheckBox pt:FormItem.LabelContent="Is _Active" />
</pt:Form>
In our product we use a HeaderedContentControl to lay out forms in a grid. The control template has a label and padding/margins so that the control's content is always spaced appropriately. In the XAML we just add them down the columns.
I'd post some XAML but I'm in the middle of getting a new computer set up. :| But from what I remember it would look something like this:
<Style x:Key="hccFormStyle" Targettype="{x:Type HeaderedContentControl}>
... some setters for colors, margin, padding, etc...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Label Content={Binding Content} Target={Binding Tag}> <-- pass the control for the access key with the tag
<ContentPresenter>
</ControlTemplate>
...triggers if necessary - hover states, etc...
</style>
Then in the grid, you define your rows and columns, and put one of these in each cell, or just down each row:
<HeaderedContentControl x:Name="username" Grid.Column=0 Content="User Name" Tag=textboxUserName>
<Textbox x:Name=textboxUserName>
</HeaderedContentControl>
I might be answering a different question but this is how we lay out our forms.
I had the same problem, reordering controls in a Grid based layout is a real pain.
So I've wrote a custom panel that does "form layout" (groups of two columns, all labels same size, all control same size,everything aligned, etc.), it's on my blog at: http://www.nbdtech.com/Blog/archive/2010/07/27/easy-form-layout-in-wpf-part-1-ndash-introducing-formpanel.aspx

Resources