I am trying to use grid system as suggestion by another user to another question of mine I have tried to implement the grid system but with little success it is placing the buttons and the grid where i want them but the textbox for name and with should be at the bottom of the listview
These three controls should appear at the bottom of the list view
<TextBox Name="txtDsiplayName" Text="{Binding Path=CustomColumnsDisplayName, Mode=TwoWay}" Height="23"
Width="452" Margin="0,149.86,0,188.5" Grid.ColumnSpan="2" />
<Label Content="Width:" Height="400" VerticalAlignment="Bottom" Grid.ColumnSpan="2" HorizontalAlignment="Left" Width="452" />
<TextBox Name="txtWdith" Width ="30" Height="23" Margin="211,149.86,6,188.5" Grid.Row="1" />
What am I doing wrong?
But as you see the text box is not showing correctly and the list view should be aligned to the top of the move up button winforms I forgive thee and still love ya.
<Grid Margin="0,20,0,0" VerticalAlignment="Top" Height="400">
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Content="Custom Fields" Margin="12,0,0,0" Grid.ColumnSpan="2"></Label>
<StackPanel Grid.Row="1" Grid.Column="0" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Expander Margin="0,0,0,0"
IsExpanded="true"
Header="Custom Columns">
<Grid Margin="12,0,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="38.64" />
<RowDefinition Height="361.36"/>
<RowDefinition Height="*"/>
<RowDefinition Height="400"/>
<RowDefinition Height="400"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="247" />
<ColumnDefinition Width="205"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ListView Name="listView1"
MinHeight="80"
SelectionMode="Single" Margin="0,11.36,0,108.4" SelectionChanged="listView1_SelectionChanged" Grid.Row="1" Grid.ColumnSpan="2">
<ListView.View>
<GridView>
<GridViewColumn Header="Order" Width="100"
DisplayMemberBinding="{Binding Path=CustomColumnsOrder}"></GridViewColumn>
<GridViewColumn Header="Display Name" Width="290"
DisplayMemberBinding="{Binding Path=CustomColumnsDisplayName}"></GridViewColumn>
<GridViewColumn Header="Width" Width="50"
DisplayMemberBinding="{Binding Path=CustomColumnsWidth}"></GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<Label Content="Name:" Grid.ColumnSpan="2" />
<TextBox Name="txtDsiplayName" Text="{Binding Path=CustomColumnsDisplayName, Mode=TwoWay}" Height="23"
Width="452" Margin="0,149.86,0,188.5" Grid.ColumnSpan="2" />
<Label Content="Width:" Height="400" VerticalAlignment="Bottom" Grid.ColumnSpan="2" HorizontalAlignment="Left" Width="452" />
<TextBox Name="txtWdith" Width ="30" Height="23" Margin="211,149.86,6,188.5" Grid.Row="1" />
<StackPanel Grid.Column="3" Grid.Row="2" Margin="0,0,74,0" Grid.RowSpan="2"/>
<StackPanel Grid.Column="2" Margin="0" Grid.RowSpan="2" Grid.ColumnSpan="2">
<Button Name="moveUpButton" Click="MoveUp" DockPanel.Dock="Right" Content="Move Up"
Height="22" Width="74" />
<Button Name="moveDownButton" Click="MoveDown" DockPanel.Dock="Right" Content="Move Down"
Height="22" Width="74" />
<Button Name="deleteButton" IsEnabled="{Binding ElementName=columnsList, Path=SelectedItems.Count}" Click="RemoveColumn" DockPanel.Dock="Right" Content="Delete"
Height="22" Width="74" />
<Button Name="addButton" Click="AddColumn" Content="Add Item"
Height="22" Width="74" />
</StackPanel>
</Grid>
</Expander>
</StackPanel>
</Grid>
It looks like the grid row height and the text box margin are conflicting with each other, if you remove the margin line from the text box you should see it moves to the top.
I would suggest removing the margins and just try to make use of heights to position the controls.
Something like this maybe? (You will need to add back in your heights/widths etc, but it gives you a rough idea)
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Custom Fields" />
<StackPanel Grid.Row="1" VerticalAlignment="Top">
<Expander Header="Custom Columns" IsExpanded="true">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListView Name="listView1" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" SelectionMode="Single">
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Path=CustomColumnsOrder}" Header="Order" />
<GridViewColumn DisplayMemberBinding="{Binding Path=CustomColumnsDisplayName}" Header="Display Name" />
<GridViewColumn DisplayMemberBinding="{Binding Path=CustomColumnsWidth}" Header="Width" />
</GridView>
</ListView.View>
</ListView>
<StackPanel Grid.Row="1" Grid.RowSpan="2" Grid.Column="3">
<Button Name="moveUpButton" Content="Move Up" DockPanel.Dock="Right" />
<Button Name="moveDownButton" Content="Move Down" DockPanel.Dock="Right" />
<Button Name="deleteButton" Content="Delete" DockPanel.Dock="Right" IsEnabled="{Binding ElementName=columnsList, Path=SelectedItems.Count}" />
<Button Name="addButton" Content="Add Item" />
</StackPanel>
<Label Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Content="Name:" />
<TextBox Name="txtDsiplayName" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Path=CustomColumnsDisplayName, Mode=TwoWay}" />
<Label Grid.Row="4"
Grid.Column="0"
Grid.ColumnSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Content="Width:" />
<TextBox Name="txtWdith" Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" />
</Grid>
</Expander>
</StackPanel>
</Grid>
Related
I have a WPF MVVM project that includes a View which contains several controls.
There is a DockPanel which contains all the controls in the View with DataContext to a MainViewModel Class, and inside of it there is a Grid with DataContext to other object ViewModel which it's property contained in the MainViewModel Class.
Now, in that Grid I have a 2 buttons surrounds with WrapPanel, and the buttons have a Commands to a property which wrote in the MainViewModel Class, and when I pressed on it nothing happens (Because the Grid's DataContext is to other object).
I need the Commands to be stay in the MainViewModel Class, How can I do that?
XAML: (just the relevant parts)
<DockPanel x:Name="MonitorParent" DataContext="{Binding MonitorMainViewModel}" LastChildFill="False" Width="1144" HorizontalAlignment="Left">
.......
<StackPanel>
<ContentControl Visibility="{Binding Path=NoMonitorsMessageVisibility, Converter={StaticResource visibilityConverter}}">
<StackPanel Width="804" Height="574">
<Grid DataContext="{Binding CurrentMonitor}" Margin="10 0" Height="auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="23" />
<RowDefinition Height="Auto" MinHeight="23" />
<RowDefinition Height="Auto" MinHeight="23" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="15" Content="Serial Number" x:Name="SerialNumber" />
<WrapPanel DataContext="{Binding MonitorMainViewModel}" HorizontalAlignment="Center" Margin="0,10,0,10" Grid.ColumnSpan="2" Grid.Row="6" >
<Button Content="Add" Width="60" Margin="0,0,40,0" Command="{Binding AddConfidenceCommand}" />
<Button Content="Delete" Width="60" Margin="30,0,0,0" Command="{Binding DeleteConfidenceCommand}"/>
</WrapPanel>
........
</DockPanel
You could use the name of the DockPanel for binding like this:
<DockPanel x:Name="MonitorParent" DataContext="{Binding MonitorMainViewModel}" LastChildFill="False" Width="1144" HorizontalAlignment="Left">
.......
<StackPanel>
<ContentControl Visibility="{Binding Path=NoMonitorsMessageVisibility, Converter={StaticResource visibilityConverter}}">
<StackPanel Width="804" Height="574">
<Grid DataContext="{Binding CurrentMonitor}" Margin="10 0" Height="auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="23" />
<RowDefinition Height="Auto" MinHeight="23" />
<RowDefinition Height="Auto" MinHeight="23" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="15" Content="Serial Number" x:Name="SerialNumber" />
<WrapPanel DataContext="{Binding MonitorMainViewModel}" HorizontalAlignment="Center" Margin="0,10,0,10" Grid.ColumnSpan="2" Grid.Row="6" >
<Button Content="Add" Width="60" Margin="0,0,40,0" Command="{Binding ElementName=MonitorParent, Path=DataContext.AddConfidenceCommand}" />
<Button Content="Delete" Width="60" Margin="30,0,0,0" Command="{Binding ElementName=MonitorParent, Path=DataContext.DeleteConfidenceCommand}"/>
</WrapPanel>
........
Try this:
<Button Content="Add" Width="60" Margin="0,0,40,0"
Command="{Binding DataContext.AddConfidenceCommand, ElementName=MonitorParent}" />
Or:
<Button Content="Add" Width="60" Margin="0,0,40,0"
Command="{Binding DataContext.AddConfidenceCommand, RelativeSource={RelativeSource AncestorType=DockPanel}}" />
I'm using Telerik RadAutoCompleteBox
<telerik:RadAutoCompleteBox x:Name="autoComleteBox" Width="200"
ItemsSource="{Binding Countries}"
DisplayMemberPath="Name"
AutoCompleteMode="Suggest"/>
The result is:
What I want to do is how can I display more detail about country, ( Lets say line display country name and another line to display country code ) Like:
Define a DropDownItemTemplate:
<telerik:RadAutoCompleteBox x:Name="autoComleteBox" Width="200"
ItemsSource="{Binding Countries}"
DisplayMemberPath="Name"
AutoCompleteMode="Suggest">
<telerik:RadAutoCompleteBox.DropDownItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="ID:" />
<TextBlock Text="Name:" Grid.Row="1" />
<TextBlock Text="RSS Url:" Grid.Row="2" />
<TextBlock Text="{Binding Id}" Grid.Column="1" />
<TextBlock Text="{Binding Name}" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="{Binding Url}" Grid.Row="2" Grid.Column="1" />
</Grid>
</DataTemplate>
</telerik:RadAutoCompleteBox.DropDownItemTemplate>
</telerik:RadAutoCompleteBox>
I need to add Tabs which contain Grid. Grid contains TextBoxes and Labels with alredy defined style. How can I programmatically generate XAML code (Tabs with already present elements)? Can I do this or I need to create each element, set it style and add to the TabItem? Here's a part of the code:
<TabItem Header="tabItem1" Name="tabItem1">
<Grid Name="grid1" HorizontalAlignment="Stretch" VerticalAlignment="Top" DataContext="{Binding ElementName=tabControl1, Path=ActualWidth}" MinWidth="768" MinHeight="446">
<Grid.RowDefinitions>
<RowDefinition MinHeight="43" Height="*" />
<RowDefinition Height="*" MinHeight="45" />
<RowDefinition Height="*" MinHeight="435" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" MinWidth="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" Height="27" Name="textBox1" VerticalAlignment="Top" Margin="11,6,0,0" HorizontalAlignment="Stretch" Width="Auto" FontSize="14" HorizontalContentAlignment="Stretch" MinWidth="141" FlowDirection="LeftToRight" />
<Label Content="Supplier" Height="27" Name="label2" VerticalAlignment="Top" FontSize="14" FontFamily="Tahoma" FontWeight="Bold" Margin="21,6,0,0" Width="Auto" IsEnabled="True" HorizontalAlignment="Stretch" Foreground="Black" Background="White" MinWidth="133" HorizontalContentAlignment="Stretch" />
<TextBox Grid.Column="1" Grid.Row="1" FontSize="14" Height="27" HorizontalAlignment="Stretch" Margin="11,6,0,0" Name="textBox11" VerticalAlignment="Top" Width="Auto" MinWidth="141" />
<Label Grid.Row="1" Content="Supplier Bank" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label3" VerticalAlignment="Top" Width="Auto" Background="White" MinWidth="133" />
<TextBox Grid.Column="1" Grid.Row="2" FontSize="14" Height="27" HorizontalAlignment="Stretch" Margin="11,6,0,0" Name="textBox12" VerticalAlignment="Top" Width="Auto" MinWidth="141" />
<Label Grid.Row="2" Content="Account Number" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label4" VerticalAlignment="Top" Background="White" MinWidth="133" />
<TextBox Grid.Column="4" FontSize="14" Height="27" Margin="11,6,20,0" Name="textBox2" VerticalAlignment="Top" HorizontalAlignment="Stretch" Width="Auto" DataContext="{Binding ElementName=grid1, Path=ActualWidth}" MinWidth="141" />
<Label Grid.Column="3" Content="Buyer" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label5" VerticalAlignment="Top" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Background="White" MinWidth="133" />
<TextBox Grid.Column="4" Grid.Row="1" FontSize="14" Height="27" HorizontalAlignment="Stretch" Margin="11,6,20,0" Name="textBox3" VerticalAlignment="Top" Width="Auto" MinWidth="141" />
<Label Grid.Column="3" Grid.Row="1" Content="Buyer Bank" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label6" VerticalAlignment="Top" Width="Auto" HorizontalAlignment="Stretch" Background="White" MinWidth="133" />
<TextBox Grid.Column="4" Grid.Row="2" FontSize="14" Height="27" HorizontalAlignment="Stretch" Margin="11,6,20,0" Name="textBox4" VerticalAlignment="Top" Width="Auto" MinWidth="141" />
<Label Grid.Column="3" Grid.Row="2" Content="Account Number" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label7" VerticalAlignment="Top" Width="Auto" HorizontalAlignment="Stretch" Background="White" MinWidth="133" />
</Grid>
</TabItem>
Bind your TabControl.ItemsSource property to an ObservableCollection<SomeViewModel> and then use DataTemplates to define what each ViewModel will look like.
More details in this answer.
Do you NEED to do it programmatically?
It'd be better to have a collection of some class that could contain the information of each TabItem, bind the TabControl to that collection and set an ItemTemplate so every item shows up the same way.
For instance, you could have a class like this:
public class BankMovement
{
public string Supplier { get; set; }
public string SupplierBank { get; set; }
// ... etc.
}
And in your viewmodel or code-behind, create a collection of that type.
public ObservableCollection<BankMovement> Movements { get; set; }
Movements = new ObservableCollection<BankMovement>();
Movements.Add(new BankMovement());
// add as many movements as you want
//tabControl1.ItemsSource = Movements; You can do this through Binding in the XAML, preferably
Finally, in your XAML, bind the TabControl's ItemsSource to that collection, and set an ItemTemplate. Also, in the DataTemplate, bind the TextBoxes to the corresponding property of the BankMovement class:
<TabControl ItemsSource="{Binding Movements}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Name="grid1" HorizontalAlignment="Stretch" VerticalAlignment="Top" MinWidth="768" MinHeight="446">
<Grid.RowDefinitions>
<RowDefinition MinHeight="43" Height="*" />
<RowDefinition Height="*" MinHeight="45" />
<RowDefinition Height="*" MinHeight="435" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" MinWidth="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Text="{Binding Supplier}" Grid.Column="1" Height="27" Name="textBox1" VerticalAlignment="Top" Margin="11,6,0,0" HorizontalAlignment="Stretch" Width="Auto" FontSize="14" HorizontalContentAlignment="Stretch" MinWidth="141" FlowDirection="LeftToRight" />
<Label Content="Supplier" Height="27" Name="label2" VerticalAlignment="Top" FontSize="14" FontFamily="Tahoma" FontWeight="Bold" Margin="21,6,0,0" Width="Auto" IsEnabled="True" HorizontalAlignment="Stretch" Foreground="Black" Background="White" MinWidth="133" HorizontalContentAlignment="Stretch" />
<TextBox Text="{Binding SupplierBank}" Grid.Column="1" Grid.Row="1" FontSize="14" Height="27" HorizontalAlignment="Stretch" Margin="11,6,0,0" Name="textBox11" VerticalAlignment="Top" Width="Auto" MinWidth="141" />
<Label Grid.Row="1" Content="Supplier Bank" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label3" VerticalAlignment="Top" Width="Auto" Background="White" MinWidth="133" />
<!-- etc. -->
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
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
}
}
This is my control with my custom DataTemplateSelector:
<m:Map x:Name="MainMap">
<m:MapItemsControl
ItemsSource="{Binding Source={StaticResource WorkLayerData}}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<Mobile:DevicePushpinTemplateSelector
m:MapLayer.Position="{Binding Location}"
ZoomLevel="{Binding ZoomLevel, ElementName=MainMap}"
Content="{Binding}">
<Mobile:DevicePushpinTemplateSelector.DotTemplate>
<DataTemplate>
<Ellipse Width="8" Height="8" Stroke="Black" Fill="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" StrokeThickness="1" />
</DataTemplate>
</Mobile:DevicePushpinTemplateSelector.DotTemplate>
<Mobile:DevicePushpinTemplateSelector.NumberedTemplate>
<DataTemplate>
<Border x:Name="border" Background="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" BorderBrush="Black" BorderThickness="2" Padding="2" Height="20" CornerRadius="8">
<TextBlock VerticalAlignment="Center" Text="{Binding DisplayId}" />
</Border>
</DataTemplate>
</Mobile:DevicePushpinTemplateSelector.NumberedTemplate>
<Mobile:DevicePushpinTemplateSelector.DetailedTemplate>
<DataTemplate>
<Border Background="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" BorderBrush="Black" BorderThickness="1" Padding="2" CornerRadius="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="Id:" FontWeight="Bold" />
<TextBlock Text="{Binding DisplayId}" Grid.Column="1" />
<TextBlock Text="Device Id:" FontWeight="Bold" Grid.Row="1" />
<TextBlock Text="{Binding DeviceId}" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Speed:" FontWeight="Bold" Grid.Row="2" />
<TextBlock Text="{Binding Speed}" Grid.Row="2" Grid.Column="1" />
<TextBlock Text="Location:" FontWeight="Bold" Grid.Row="3" />
<TextBlock Text="{Binding Location}" Grid.Row="3" Grid.Column="1" />
<Button Content="View Details" Grid.Row="4" Grid.ColumnSpan="2" />
</Grid>
</Border>
</DataTemplate>
</Mobile:DevicePushpinTemplateSelector.DetailedTemplate>
</Mobile:DevicePushpinTemplateSelector>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:Map>
I want to move my Mobile:DevicePushpinTemplateSelector.DetailedTemplate into resources so I can reuse it somewhere else.
I declared resource:
<UserControl.Resources>
<DataTemplate x:Key="DetailedMapItemTemplate">
<Border Background="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" BorderBrush="Black" BorderThickness="1" Padding="2" CornerRadius="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="Id:" FontWeight="Bold" />
<TextBlock Text="{Binding DisplayId}" Grid.Column="1" />
<TextBlock Text="Device Id:" FontWeight="Bold" Grid.Row="1" />
<TextBlock Text="{Binding DeviceId}" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Speed:" FontWeight="Bold" Grid.Row="2" />
<TextBlock Text="{Binding Speed}" Grid.Row="2" Grid.Column="1" />
<TextBlock Text="Location:" FontWeight="Bold" Grid.Row="3" />
<TextBlock Text="{Binding Location}" Grid.Row="3" Grid.Column="1" />
<Button Content="View Details" Grid.Row="4" Grid.ColumnSpan="2" />
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
My problem is that I don't know HOW to use this DataTemplate inside my selector. What is the XAML I need to use? With controls like ListBox it is easy, just set ItemTemplate="{StaticResource thisTemplate}" but how do I do this in my case? Still learning XAML
Just set the DetailedTemplate property in the tag itself:
<Mobile:DevicePushpinTemplateSelector
m:MapLayer.Position="{Binding Location}"
ZoomLevel="{Binding ZoomLevel, ElementName=MainMap}"
Content="{Binding}"
DetailedTemplate="{StaticResource DetailedMapItemTemplate}">
...