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>
Related
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>
I am Silverlight5 beginner and i have an error which is as below (which are for same line which i pointed in xaml code , where as i have properly referenced assembmy xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"):
Error Nested properties are not supported: DataGridTemplateColumn.CellTemplate.
Error The attachable property 'CellTemplate' was not found in type 'DataGridTemplateColumn'.
Error Unexpected PROPERTYELEMENT in parse rule PropertyElement ::= . PROPERTYELEMENT Content? ENDTAG..
And cod to do so is as below:
<data:DataGrid Grid.Row="1" x:Name="gridVersions" ItemsSource="{Binding ProgramVersion }" IsReadOnly="True" AutoGenerateColumns="False">
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="Version" Binding="{Binding Version}" Width="2*"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="Live" Binding="{Binding Live}" Width="2*"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="Date modif." Binding="{Binding ModifDate}" Width="3*"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="..." Binding="{Binding Path=More}" Width="*"></data:DataGridTextColumn>
**<data:DataGridTemplateColumn.CellTemplate>** //Error prone line
<DataTemplate>
<Button>More Info
<ToolTipService.ToolTip>
<Border Background="White">
<Grid Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Author" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Author}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Date of Creation" />
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding DateCreation}"/>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Company" />
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding Company}"/>
<TextBlock Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="1" Text="Description"/>
<TextBox Grid.Row="5" Grid.Column="0" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2" Text="{Binding Description}"/>
<TextBlock Grid.Row="6" Grid.Column="0" Text="DocUrl" />
<TextBlock Grid.Row="6" Grid.Column="1" Text="{Binding DocUrl}"/>
<TextBlock Grid.Row="7" Grid.Column="0" Text="ProgramId" />
<TextBlock Grid.Row="7" Grid.Column="1" Text="{Binding ProgramId}"/>
</Grid>
</Border>
</ToolTipService.ToolTip>
</Button>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGrid.Columns>
</data:DataGrid>
</Grid>
You need to define an actual DataGridTemplateColumn element first:
<data:DataGrid.Columns>
<!-- Columns ... -->
<data:DataGridTemplateColumn>
<data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
Note that in XAML syntax, when you have an element and sub-element like this:
<a>
<a.b>
content
</a.b>
</a>
Then this means to set the property b of a to "content". If the elements are of this form:
<a>
<b.c>
</b.c>
</a>
That can be legal also, but it means to set the attached dependency property c of the class b on the object a. That's why you're seeing the error message:
The attachable property 'CellTemplate' was not found in type 'DataGridTemplateColumn'
The XAML parser thinks you're trying to attach a property DataGridTemplateColumn.CellTemplate ("b.c") to the element DataGrid.Columns ("a").
I am implementing a headered table using grids above each other, so I can specify columns headers. There is one grid for headers, and one grid for every row in the table. It is not very practical, header widths has to be specified twice. Maybe I instead can have a ListView/DataGrid without all styling?
How can I get rid of this multi Grid approach?
Here is what I got:
<StackPanel Orientation="Vertical">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="header 1" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="header 2" />
</Grid>
<ItemsControl ItemsSource="{Binding Entities}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Property1}" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="{Binding Property2}" />
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
You can use Grid.IsSharedSizeScope attached property
<StackPanel Orientation="Vertical" Grid.IsSharedSizeScope="True">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="First" Width="40" />
<ColumnDefinition SharedSizeGroup="Second" Width="70" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="header 1" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="header 2" />
</Grid>
<ItemsControl ItemsSource="{Binding Entities}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="First" />
<ColumnDefinition SharedSizeGroup="Second" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Property1}" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="{Binding Property2}" />
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
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}">
...
Hi I see there have been many questions about ListBox and filling the entire space for the DataTemplate but I still cannot get anything to work. What I have is a ListBox and the DataTemplate has a UserControl. How do I get my UserControl to stretch the data to fill the space?
MainWindow XAML snippet:
<ListBox x:Name="ConfiguredItemsList">
<ListBox.ItemTemplate>
<DataTemplate>
<local:ConfiguredItem DataContext="{Binding}" HorizontalContentAlignment="Stretch" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
UserControl XAML snippet:
<UserControl.Resources>
<local:ImagePathConverter x:Key="ImagePathConverter"/>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" x:Name="NameLabel" Text="Name:" />
<TextBlock Grid.Row="0" Grid.Column="1" x:Name="tbName" Text="{Binding Path=Name}" />
<TextBlock Grid.Row="1" Grid.Column="0" x:Name="DescriptionLabel" Text="Description: " />
<TextBlock Grid.Row="1" Grid.Column="1" x:Name="Description" Text="{Binding Path=Description}" />
<TextBlock Grid.Row="2" Grid.Column="0" x:Name="TimeLabel" Text="Time:" />
<TextBlock Grid.Row="2" Grid.Column="1" x:Name="Time" Text="{Binding Path=ChangeTime, StringFormat={}{0:h:mm tt}}" />
</Grid>
<Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
<Image Source="{Binding Path=WallpaperInfo, Converter={StaticResource ImagePathConverter}}" />
</Border>
</Grid>
Have you tried to set HorizontalContentAlignment to stretch on list box level?
<ListBox x:Name="ConfiguredItemsList" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<local:ConfiguredItem DataContext="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Note: I have set HorizontalContentAlignment property of ListBox instead of Item.