I have grid designed something like below:
This is xaml used for a grid:-
I am using devexpress gridcontrol in my application.
<dxg:GridControl ItemsSource="{Binding MyAddresses}">
<dxg:GridControl.View>
<dxg:TableView NavigationStyle="Cell"></dxg:TableView>
</dxg:GridControl.View>
<dxg:GridControl.Columns>
<dxg:GridColumn Name="MyAddress" Header="Address" MinWidth="725">
<dxg:GridColumn.CellTemplate>
<DataTemplate>
<Grid DataContext="{Binding RowData.Row}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition MinWidth="250"></ColumnDefinition>
<ColumnDefinition Width="25"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition MinWidth="250"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Text="Address"/>
<dxe:TextEdit Grid.Row="0" TextWrapping="Wrap" AcceptsReturn="True" VerticalContentAlignment="Top" Grid.RowSpan="3" Grid.Column="2" MaxLength="2000" VerticalAlignment="Stretch" Text="{Binding PostAddress}"/>
<TextBlock Grid.Row="6" Grid.Column="0" Text="Country" />
<dxe:TextEdit Grid.Row="6" Grid.Column="2" Text="{Binding PostCountry}"/>
<TextBlock Grid.Row="4" Grid.Column="0" Text="City" />
<dxe:TextEdit Grid.Row="4" Grid.Column="2" MaxLength="100" Text="{Binding City}"/>
<TextBlock Grid.Row="8" Grid.Column="0" Text="Postal Code" />
<dxe:TextEdit Grid.Row="8" Grid.Column="2" MaxLength="15" Text="{Binding PostalCode}"/>
<TextBlock Grid.Row="10" Grid.Column="0" Text="Subdivision" />
<dxe:TextEdit Grid.Row="10" Grid.Column="2" MaxLength="100" Text="{Binding Subdivision}"/>
<TextBlock Grid.Row="0" Grid.Column="4" Text="Email" />
<dxe:TextEdit Grid.Row="0" Grid.Column="6" MaxLength="254" Text="{Binding Email1}"/>
<TextBlock Grid.Row="2" Grid.Column="4" Text="Phone" />
<dxe:TextEdit Grid.Row="2" Grid.Column="6" MaxLength="20" Text="{Binding Phone1}"/>
<TextBlock Grid.Row="4" Grid.Column="4" Text="Phone" />
<dxe:TextEdit Grid.Row="4" Grid.Column="6" MaxLength="20" Text="{Binding Phone2}"/>
<TextBlock Grid.Row="6" Grid.Column="4" Text="Fax" />
<dxe:TextEdit Grid.Row="6" Grid.Column="6" MaxLength="50" Text="{Binding Fax1}"/>
<TextBlock Grid.Row="8" Grid.Column="4" Text="Telex" />
<dxe:TextEdit Grid.Row="8" Grid.Column="6" MaxLength="100" Text="{Binding Telex}"/>
<TextBlock Grid.Row="10" Grid.Column="4" Text="Web" />
<dxe:TextEdit Grid.Row="10" Grid.Column="6" MaxLength="255" Text="{Binding Web}"/>
</Grid>
</DataTemplate>
</dxg:GridColumn.CellTemplate>
</dxg:GridColumn>
<dxg:GridColumn FieldName="NewField"/>
</dxg:GridControl.Columns>
</dxg:GridControl>
In first cell I have few columns, I want to move cursor with in first cell and then jump to second cell.
Can someone please help.
![enter image description here][1]
My grid looks like above. I have focus on first field . On pressing tab I want focus move to City field not to next cell which is New Field.
Any suggestions?
[1]: http://i.stack.imgur.com/ENqqP.png
The same issue is already discussed at DevExpress Support Center: Tabbing issue in CellTemplate. Thus, you can use the solution provided by the DevExpress Support Team.
The main idea of this solution is in custom handling of the TabbedView.PreviewKeyDown event:
void TableView_PreviewKeyDown(object sender, KeyEventArgs e) {
if (e.Key == Key.Tab) {
// do some custom handling
e.Handled = true; // avoid TabbedView's default focus processing
}
}
Related
I'm new to WPF app developing and there is no such thing as RelativeLayout(Where I can arrange views relative to another view...like in Android).
My listview row Template looks like this.
Can someone help me with the code to design such template in XAML
EDIT : This is the code I've tried so far(Only for the first row i.e for name, time and date)...It doesn't seem to work.
<ListView x:Name="listView" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="752" Margin="20,282,0,0" VerticalAlignment="Top" Width="486" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
<!--<ColumnDefinition Width="120"/>-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Grid.Row="0" Grid.Column="1" FlowDirection="RightToLeft" Text="{Binding Time}" FontWeight="Bold" />
<!--<TextBlock Grid.Column="1" Background="Gainsboro" FlowDirection="LeftToRight" Text="{Binding Date}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The Time and Date appear beside each other. I thought using flow direction should help.
Try this :
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Time}" FontWeight="Bold" HorizontalAlignment="Right"/>
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Header}" FontWeight="Bold" />
<TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Details}" FontWeight="Bold" />
</Grid>
</DataTemplate>
NOTE: Avoid some syntax error because I developed in notepad. It is not having any scrollbar as shown in image in your question. You can comment if any issue. You can apply text formatting and margin as per need.
I have a content app I have created that displays a list of tracks (for now) that represent different situations. They each have a target button, case #, case type, and date. I am using a telerik:radgridview to achieve this and each row is clickable. When expanding the row you see more information about the situation. One section is called 'Responding Assets'. In this section I want to display a ListBox or anything I can use to display those same tracks again. This is just for testing purposes and I will you a certain set of data later, but I can't get anything to display here. I don't know if there is an issue trying to display another list in a radgrid or what? Any ideas why this isn't working?
.xaml code
<telerik:RadGridView.RowDetailsTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Background="#303134" Name="RowDetails">
<Grid Margin="10 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--SUMMARY-->
<Grid Margin="10 10" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="SUMMARY" FontSize="14" FontFamily="Segoe UI Bold" Foreground="White" Margin="4 0 0 5" />
<Rectangle Height="1" Fill="#A6A6A6" Grid.Row="1" VerticalAlignment="Center" Margin="2 0 2 10" Stretch="Fill" Grid.ColumnSpan="2" />
<TextBlock Text="Address: " FontSize="12" FontFamily="Segoe UI Bold" Foreground="#A6A6A6" Margin="4 2" Grid.Row="2" />
<TextBlock Text="1501 Main Street Columbia, SC" FontSize="12" FontFamily="Segoe UI" Foreground="#A6A6A6" Margin="4 2"
Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left" />
<TextBlock Text="Subtype: " FontSize="12" FontFamily="Segoe UI Bold" Foreground="#A6A6A6" Margin="4 2" Grid.Row="3" />
<TextBlock Text="Active Shooter on Foot" FontSize="12" FontFamily="Segoe UI" Foreground="#A6A6A6" Margin="4 2" Grid.Row="3"
Grid.Column="1" HorizontalAlignment="Left"/>
<TextBlock Text="Dispatch Group: " FontSize="12" FontFamily="Segoe UI Bold" Foreground="#A6A6A6" Margin="4 2" Grid.Row="4"/>
<TextBlock Text="District 22" FontSize="12" FontFamily="Segoe UI" Foreground="#A6A6A6" Margin="4 2" Grid.Row="4" Grid.Column="1"
HorizontalAlignment="Left"/>
</Grid>
<!--COMMENTS-->
<Grid Margin="10 10" Grid.Row="1" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="COMMENTS" FontSize="14" FontFamily="Segoe UI Bold" Foreground="White" Margin="4 10 0 5" />
<Rectangle Height="1" Fill="#A6A6A6" Grid.Row="1" VerticalAlignment="Center" Margin="2 0 2 10" Stretch="Fill" />
<TextBlock Text="Event Comments" FontSize="12" FontFamily="Segoe UI Bold" Foreground="#A6A6A6" Margin="4 6" Grid.Row="2"/>
<Border Grid.Row="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="100" BorderBrush="#535354">
<TextBox Grid.Row="3" Name="EventComments" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Left"
Margin="4 0 10 10" TextWrapping="Wrap" Text="Comments from CAD system here" IsReadOnly="True" Height="100" Background="#3F4145"
BorderThickness="0" Foreground="#A6A6A6" />
</Border>
<TextBlock Text="Location Comments" FontSize="12" FontFamily="Segoe UI Bold" Foreground="#A6A6A6" Margin="4 6" Grid.Row="4"/>
<Border Grid.Row="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="100" BorderBrush="#535354">
<TextBox Grid.Row="5" Name="LocationComments" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Left"
Margin="4 0 10 10" TextWrapping="Wrap" IsReadOnly="True" Height="100" Background="#3F4145"
BorderThickness="0" Foreground="#A6A6A6" />
</Border>
</Grid>
<!--RESPONDING ASSETS-->
<Grid Margin="10 10" Grid.Row="2" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="300" />
</Grid.RowDefinitions>
<TextBlock Text="RESPONDING ASSETS" FontSize="14" FontFamily="Segoe UI Bold" Foreground="White" Margin="4 10 0 5" />
<Rectangle Height="1" Fill="#A6A6A6" Grid.Row="1" VerticalAlignment="Center" Margin="2 0 2 10" Stretch="Fill" />
<!--ENTITY LIST-->
<Grid Grid.Row="2">
<ListBox ItemsSource="{Binding FilteredTrackList}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 0 10">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0 2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TrackName.Value}" />
<TextBlock Text="{Binding DateCreated}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
</Grid>
</StackPanel>
</DataTemplate>
</telerik:RadGridView.RowDetailsTemplate>
I am not providing the code for how I obtain the FilteredTrackList because this clearly works otherwise I wouldn't have rows to click on in the radgrid.
The DataContext of the ListBox is an individual Entity object. If you want to bind to the same FilteredTrackList as the parent RadGridView binds to, you could use {RelativeSource}:
<ListBox ItemsSource="{Binding DataContext.FilteredTrackList, RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 0 10">
I'm new in WPF, but trying to learn it hard, as much as I can. Please help me overcome a problem I'm struggling with right now. I'm building a multitab UI, in which each tab supposed to have exactly the same control layout. In the same time inside a tab there is also repetitive chunk of controls (groups of labels). Controls' content will be filled by data coming from external source - apparently I'll use instances of data object to bind them to tabitem's DataContext property: one instance per tab item. My problem is, I can't figure out how to optimize the code by using templates. I think I should use 2 different templates, one inside the tab and another for whole tab, right? But how to bind the data then? Below the xaml markup I'm going to use for each tab and code-behind, so you can get the idea. The labels with numerical content should be bound to the properties of object instances (PLC).
XAML:
<Window x:Class="WpfPromholComplementary_1.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:loc = "clr-namespace:WpfPromholComplementary_1"
xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
xmlns:dvc="clr-namespace:System.Windows.Forms.DataVisualization.Charting;assembly=System.Windows.Forms.DataVisualization"
Title="Window2" Height="800" Width="1000">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="210" />
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="1" Grid.Column="0" BorderThickness="1" BorderBrush="Blue" Margin="2" CornerRadius="8,8,8,8">
<Grid Background="LightCyan">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Label Content="Module 1" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
<Border Grid.Row="1" Grid.Column="1" BorderThickness="1" BorderBrush="Blue" >
<Grid Background="LightCyan">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Label Content="Module 2" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
<Border Grid.Row="1" Grid.Column="2" BorderThickness="1" BorderBrush="Blue">
<Grid Background="LightCyan">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Label Content="Module 3" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
<Border Grid.Row="1" Grid.Column="3" BorderThickness="1" BorderBrush="Blue">
<Grid Background="LightCyan">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Label Content="Module 4" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
<Border Grid.Row="1" Grid.Column="4" BorderThickness="1" BorderBrush="Blue">
<Grid Background="LightCyan">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Label Content="Module 5" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
<Border Grid.Row="1" Grid.Column="5" BorderThickness="1" BorderBrush="Blue">
<Grid Background="LightCyan">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Label Content="Module 6" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
<StackPanel Margin="5,5,5,5" Grid.Row="3" Grid.ColumnSpan="4">
<WindowsFormsHost>
<dvc:Chart x:Name="chart" />
</WindowsFormsHost>
</StackPanel>
<StackPanel Grid.Row="0" Grid.ColumnSpan="6" Orientation="Horizontal">
<Label Content="IP-address:" Height="33" Width="Auto" FontSize="20" Padding="5,0,5,5"/>
<Label Content="192.168.1.10" Height="33" Width="Auto" FontSize="20" Padding="5,0,5,5"/>
</StackPanel>
<DataGrid x:Name="dgDataGrid" Grid.Row="4" Grid.Column="4" Grid.ColumnSpan="2" IsSynchronizedWithCurrentItem="False"/>
</Grid>
Code-behind:
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.Shapes;
using System.Windows.Forms.DataVisualization.Charting;
using System.Drawing;
namespace WpfPromholComplementary_1
{
/// <summary>
/// Interaction logic for Window2.xaml
/// </summary>
public partial class Window2 : Window
{
public Window2()
{
InitializeComponent();
PLC plc1 = new PLC { ID = 1, Module_Number = "1", Channel_1 = "1234", Channel_2 = "5678", Channel_3 = "9012", Channel_4 = "3456" };
this.DataContext = plc1;
}
}
}
I have to decide to answer in 2 parts. One part will be clearly in Code-Behind approach, other will be in MVVM (Model-View-ViewModel).
Best idea to format the upper side of window is to use same component, where You will define source, instead of templating. Templating is useful at the places, where You have one control and You would like to change it's look (layout of controls).
At first You should create own UserControl (I called it MyModuleFrame in example):
XML:
<UserControl x:Class="WpfPromholComplementary_1.MyModuleFrame"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfPromholComplementary_1"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
x:Name="mUserControl">
<Border BorderThickness="1" BorderBrush="Blue" CornerRadius="8,8,8,8">
<Grid Background="LightCyan">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Label Content="{Binding ItemSource.Number, ElementName=mUserControl}" Grid.Row="1" Grid.ColumnSpan="2" FontSize="20" HorizontalAlignment="Center"/>
<Label Content="{Binding ItemSource.Ch1, ElementName=mUserControl}" Grid.Row="2" Grid.Column="1" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="{Binding ItemSource.Ch2, ElementName=mUserControl}" Grid.Row="3" Grid.Column="1" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="{Binding ItemSource.Ch3, ElementName=mUserControl}" Grid.Row="4" Grid.Column="1" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="{Binding ItemSource.Ch4, ElementName=mUserControl}" Grid.Row="5" Grid.Column="1" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 1:" Grid.Row="2" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 2:" Grid.Row="3" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 3:" Grid.Row="4" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Content="Channel 4:" Grid.Row="5" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</UserControl>
C#:
namespace WpfPromholComplementary_1
{
/// <summary>
/// Interaction logic for MyModuleFrame.xaml
/// </summary>
public partial class MyModuleFrame : UserControl
{
public MyModuleFrame()
{
InitializeComponent();
}
public Module ItemSource
{
get { return (Module)GetValue(ItemSourceProperty); }
set { SetValue(ItemSourceProperty, value); }
}
// Using a DependencyProperty as the backing store for ItemsSource. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ItemSourceProperty =
DependencyProperty.Register("ItemSource", typeof(Module), typeof(MyModuleFrame), new PropertyMetadata(default(Module)));
}
}
It is really imporant to define set the properties of all UserControls as DependencyProperty. Why? Because WPF is using them to do everything related to View handling. On the initialization, they are registered in the WPF framework & once somebody want to access them/they will call WPF (who returns the value), instead of direct approach.
Once You've defined the control, You can use it on the window. I have removed some code from start (I dont have references) & the end code just so You have an idea:
<Window x:Class="WpfPromholComplementary_1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:loc = "clr-namespace:WpfPromholComplementary_1"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
Title="Window2" Height="800" Width="1000">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="210" />
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<loc:MyModuleFrame Grid.Row="1" Grid.Column="0" ItemSource="{Binding Module1}"/>
<loc:MyModuleFrame Grid.Row="1" Grid.Column="1" ItemSource="{Binding Module2}"/>
<loc:MyModuleFrame Grid.Row="1" Grid.Column="2" ItemSource="{Binding Module3}"/>
<loc:MyModuleFrame Grid.Row="1" Grid.Column="3" ItemSource="{Binding Module4}"/>
<!-- other modules & stuff-->
</Grid>
</Window>
And once You get to the point above, You need to get the dynamical data, that can be obtained 3 ways:
Via insertion from code-behind (Win-forms approach e.g.: TextBox1.ModuleNumber="3" - is less abstract & not used in big applications)
Via Binding to Code-Behind (define property in Code-Behind, set dataContext of Window to this)
Via binding to the View-Model (following the MVVM pattern) - some tutorial here
Based on the choosen option, You have to update code above.
Also we should have defined Model for our App - Module class. This code below does not support View update. For support You must implement INotifyPropertyChanged interface (more below):
//Simplified
public class Module
{
public string Number { get; set; }
public double Ch1 { get; set; }
public double Ch2 { get; set; }
public double Ch3 { get; set; }
public double Ch4 { get; set; }
}
ViewModel:
public class MainViewModel
{
public Module Module1 { get; set; } = new Module()
{
Number = "1",
Ch1 = 123.4,
Ch2 = 123.4,
Ch3 = 123.4,
Ch4 = 123.4
};
/* other modules... */
}
MVVM approach:
App.config:
<Application x:Class="WpfPromholComplementary_1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfPromholComplementary_1"
StartupUri="MainWindow.xaml">
<Application.Resources>
<local:MainViewModel x:Key="MainViewModel"/>
</Application.Resources>
</Application>
Code-behind approach:
View.cs:
public partial class Window
{
public Window()
{
InitializeComponent();
this.DataContext = this;
}
public Module Module1 { get; set; } = new Module(); //in this case You do not need ViewModel
}
At this point You should have working application, where You cannot change anything.
Now there are 2 ways to update the values in View, one is following the proper manner of the MVVM, other is in again in code-behind.
I will describe both just for reference:
At first Your Modul needs to inherit from INotifyPropertyChange (example just for 2 propertie):
using System.ComponentModel;
public class Module : INotifyPropertyChanged
{
private string _number;
public string Number
{
get { return this._number; }
set
{
if (_number == value) return;
_number = value;
OnPropertyChanged(nameof(Number));
}
}
private double _ch1;
public double Ch1
{
get { return this._ch1; }
set
{
if (_ch1 == value) return;
_ch1 = value;
OnPropertyChanged(nameof(Ch1));
}
}
//other channels fits there
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string aNameOfProperty)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(aNameOfProperty));
}
}
Code-behind:
Now let's say we want to handle an event to the button click (XML):
<Button Click="MyButton_Click"/>
In code-behind, we can do (C#):
private void MyButton_Click(object sender, MouseEventArgs e)
{
//Your ViewModel is stored in DataContext, You can just cast to approach properties
var VM = (this.DataContext as MainViewModel);
VM.Module1.Number = "Module Number Xyz";
}
MVVM:
MVVM approach is a bit harder as You need to implement ICommand interface on some command class see relay command for reference.
Once You've got this, XML:
<Button Command="{Binding DoSomeWorkCmd}"/>
In Your ViewModel:
private ICommand _DoSomeWorkCmd;
public ICommand DoSomeWorkCmd
{
get
{
if (_DoSomeWorkCmd != null) return _DoSomeWorkCmd;
_DoSomeWorkCmd = new RelayCommand((object aParam)=> { return true; }, (object aParam) =>
{
this.Module1.Number = "MyNewNumber XyZ";
});
return this._DoSomeWorkCmd;
}
}
MVVM example of whole solution can be downloaded on my GIT: https://github.com/Tatranskymedved/WpfPromholComplementary_1
I'm using a ExpanderView to display some data in my app. But I'm having some difficulty trying to find out how to get an ExpanderViewItem's data after it's been selected.
On a ListBox you can call SelectionChanged="yourFunction" in your xaml code.. but for the expanderview I have no idea how to do this?
This is my XAML code for the expander:
<!--Custom header template-->
<DataTemplate x:Key="CustomHeaderTemplate">
<TextBlock Text="" FontSize="28" />
</DataTemplate>
<!--Custom expander template-->
<DataTemplate x:Key="CustomExpanderTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Width="400" Height="60" Fill="#FFF1F1F1" HorizontalAlignment="Stretch" StrokeThickness="0" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="{Binding procedureName}" FontSize="30" Foreground="#FF00457C" FontWeight="Normal" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="10,0,0,0" />
</Grid>
</DataTemplate>
<!--Custom expander items template-->
<DataTemplate x:Key="ExpanderViewItems" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding flagIcon}" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" />
<TextBlock FontSize="26" Text="{Binding N}" Foreground="Black" FontWeight="Normal" Grid.Row="0" Grid.Column="1"/>
<TextBlock FontSize="20" Text="{Binding RNG}" Foreground="Black" FontWeight="Normal" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2"/>
<TextBlock FontSize="26" Text="{Binding ValueAndUnit}" Foreground="Black" FontWeight="Medium" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
<TextBlock FontSize="18" Text="{Binding COM}" Foreground="Black" FontWeight="Normal" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" TextWrapping="Wrap" />
<Line StrokeThickness="1" Stroke="#C4C6CC" Stretch="Fill" X1="0" X2="1" Y1="0" Y2="0" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</DataTemplate>
<!--Listbox Containing ExpanderViews-->
<ListBox Name="testsList" Grid.Row="3" Grid.Column="0" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--ExpanderView-->
<toolkit:ExpanderView Header="{Binding}"
HeaderTemplate="{StaticResource CustomHeaderTemplate}"
Expander="{Binding}"
ExpanderTemplate="{StaticResource CustomExpanderTemplate}"
x:Name="expander"
FontSize="36"
Foreground="#FF00457C"
ItemsSource="{Binding testItems}"
ItemTemplate="{StaticResource ExpanderViewItems}" >
</toolkit:ExpanderView>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'd really appreciate any help in the right direction! This seems to be a question that is not easily answered around the web.
#Frederik I've implemented what you've done in the code above using the SelectionChanged event of the ListBox - it still works fine for me.
I've been banging my head against the wall for a bit, but finally managed to solve it. First of all for the ItemTemplate I've made sure that the template is placed in a ListBoxItem element as it follows:
<DataTemplate x:Key="ExpanderViewItems" >
<ListBoxItem DataContext="{Binding}" Tap="ListBoxItem_Tap_1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding flagIcon}" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" />
<TextBlock FontSize="26" Text="{Binding N}" Foreground="Black" FontWeight="Normal" Grid.Row="0" Grid.Column="1"/>
<TextBlock FontSize="20" Text="{Binding RNG}" Foreground="Black" FontWeight="Normal" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2"/>
<TextBlock FontSize="26" Text="{Binding ValueAndUnit}" Foreground="Black" FontWeight="Medium" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
<TextBlock FontSize="18" Text="{Binding COM}" Foreground="Black" FontWeight="Normal" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" TextWrapping="Wrap" />
<Line StrokeThickness="1" Stroke="#C4C6CC" Stretch="Fill" X1="0" X2="1" Y1="0" Y2="0" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</ListBoxItem>
</DataTemplate>
Once this is in place, go in the code behind and in the Tap event declared for the ListBoxItem use something like this:
ListBoxItem item = sender as ListBoxItem;
ExpanderItemModel model = item.DataContext as ExpanderItemModel;
Of course, ExpanderItemModel will be whatever you're using for your expander items...
This worked fine for me
Hope this helps!
Good luck!
You can use the "tap" event on the listbox:
In your XAML file add a tap event listner:
<!--Listbox Containing ExpanderViews-->
<ListBox Name="testsList" Grid.Row="3" Grid.Column="0" Tap="testsList_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--ExpanderView-->
<toolkit:ExpanderView Header="{Binding}"
...
In your code behind file, implement the tap handler:
private void testsList_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
someModel selectedItem = (someModel)this.testsList.SelectedItem;
// Do something with your seleted data
...
}
you can get the selected values by listbox selectionchanged or expanderview expanded events.
For listbox :
private void lstExams_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > 0)
{
Model.ExamTitles data = (sender as ListBox).SelectedItem as Model.ExamTitles;
}
}
Here ExamTitles is a class which contains collections
For expanderview Expanded
private void ExpanderView_Expanded(object sender, RoutedEventArgs e)
{
ExpanderView expview = (sender as ExpanderView);
Model.ExamTitles data = expview.Header as Model.ExamTitles;
}
Hope this helps!
I have a usercontrol which I want to use as a DataTemplate in a Listbox.
This works:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="Grid" Height="100" Width="880" Background="LightGray">
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="190" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="190" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0">Client</Label>
<Label Grid.Column="0" Grid.Row="2">Contact</Label>
<Label Grid.Column="1" Grid.Row="0">Date Presentation</Label>
<Label Grid.Column="2" Grid.Row="0">Action</Label>
<Label Grid.Column="3" Grid.Row="0">Date Interview</Label>
<Label Grid.Column="3" Grid.Row="2">Time Interview</Label>
<Label Grid.Column="4" Grid.Row="0">Remarks</Label>
<Label Grid.Column="5" Margin="0,0,2,0">managed by</Label>
<ComboBox Grid.Column="0" Grid.Row="1" Margin="2" Text="{Binding Path=Customer}">
<!--Template-->
</ComboBox>
<TextBox Grid.Column="0" Grid.Row="3" Margin="2" Text="{Binding Path=Contact}"></TextBox>
<TextBox Grid.Column="1" Grid.Row="1" Margin="2" Text="{Binding Path=PresentationDate}"></TextBox>
<ComboBox Grid.Column="2" Grid.Row="1" Margin="2" Text="{Binding Path=Action}">
<!--Template-->
</ComboBox>
<TextBox Grid.Column="3" Grid.Row="1" Margin="2" Text="{Binding Path=InterviewDate}"></TextBox>
<TextBox Grid.Column="3" Grid.Row="3" Margin="2" Text="{Binding Path=InterviewTime}"></TextBox>
<TextBox Grid.Column="4" Grid.Row="1" Grid.RowSpan="3" Margin="2" Text="{Binding Path=Remarks}"></TextBox>
<StackPanel Orientation="Horizontal" Grid.Column="5" Grid.Row="1" >
<ComboBox Width="124" Text="{Binding Path=Manager}" Margin="2"></ComboBox>
<Button Width="60" Height="20" Margin="4,0,0,0" >Mail</Button>
</StackPanel>
<CheckBox Grid.Column="5" Grid.Row="3" Margin="2,2,4,2">Rejection communicated</CheckBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If I put the exact same code from between the <DataTemplate> tags:
<UserControl x:Class="CandiMan.View.CandidatePresentationControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cm="clr-namespace:CandiMan;assembly=CandiMan"
xmlns:vw="clr-namespace:CandiMan.View;assembly=CandiMan"
xmlns:vm="clr-namespace:CandiMan.ViewModel;assembly=CandiMan"
Height="100" Width="880" BorderBrush="Black" BorderThickness="1">
<Grid x:Name="Grid" Height="100" Width="880" Background="LightGray">
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="190" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="190" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0">Client</Label>
<Label Grid.Column="0" Grid.Row="2">Contact</Label>
<Label Grid.Column="1" Grid.Row="0">Date Presentation</Label>
<Label Grid.Column="2" Grid.Row="0">Action</Label>
<Label Grid.Column="3" Grid.Row="0">Date Interview</Label>
<Label Grid.Column="3" Grid.Row="2">Time Interview</Label>
<Label Grid.Column="4" Grid.Row="0">Remarks</Label>
<Label Grid.Column="5" Margin="0,0,2,0">managed by</Label>
<ComboBox Grid.Column="0" Grid.Row="1" Margin="2" Text="{Binding Path=Customer}">
<!--Template-->
</ComboBox>
<TextBox Grid.Column="0" Grid.Row="3" Margin="2" Text="{Binding Path=Contact}"></TextBox>
<TextBox Grid.Column="1" Grid.Row="1" Margin="2" Text="{Binding Path=PresentationDate}"></TextBox>
<ComboBox Grid.Column="2" Grid.Row="1" Margin="2" Text="{Binding Path=Action}">
<!--Template-->
</ComboBox>
<TextBox Grid.Column="3" Grid.Row="1" Margin="2" Text="{Binding Path=InterviewDate}"></TextBox>
<TextBox Grid.Column="3" Grid.Row="3" Margin="2" Text="{Binding Path=InterviewTime}"></TextBox>
<TextBox Grid.Column="4" Grid.Row="1" Grid.RowSpan="3" Margin="2" Text="{Binding Path=Remarks}"></TextBox>
<StackPanel Orientation="Horizontal" Grid.Column="5" Grid.Row="1" >
<ComboBox Width="124" Text="{Binding Path=Manager}" Margin="2"></ComboBox>
<Button Width="60" Height="20" Margin="4,0,0,0" >Mail</Button>
</StackPanel>
<CheckBox Grid.Column="5" Grid.Row="3" Margin="2,2,4,2">Rejection communicated</CheckBox>
</Grid>
</UserControl>
into a usercontrol named CandidatePresentationControl and do it like
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<vw:CandidatePresentationControl/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
it does not get rendered. No errors, just an empty listbox. Can someone help me??
Thank you!
edit: I forgot something, dunno if it matters: The whole thing I'm doing this in, is a usercontrol, too.
It shouldn't matter, that your referenced UserControl is within another UserControl. Try these steps to better debug your XAML-code: http://beacosta.com/blog/?p=52
Since you have your data hard wired in XAML, the only way to explain the empty ListBox is, that your UserControl can't be found by the parent UserControl, imo.
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<vw:CandidatePresentationControl DataContext="{Binding}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You have to write this way in order to bind datacontext, I would suggest you look at MVVM that will give you idea on how to do it even better way.