expander collapse automatically when using Virtualization in list box - c#

I have a Listbox control and I have an expander control in all the items so that user can expand each of the item. But when I expand few items and scroll it. some times the expander get collapse automatically.
<ListBox x:Name="listbox" ItemsSource="{Binding Persons}" Background="LightBlue"
ItemTemplate="{StaticResource PersonDataTemplate}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
HorizontalContentAlignment="Stretch">
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource GroupHeaderTemplate}" />
</ListBox.GroupStyle>
</ListBox>
and resources have
<DataTemplate x:Key="PersonDataTemplate" DataType="{x:Type local:Person}">
<Grid>
<Expander >
<Expander.Header>
<TextBlock Text="{Binding Name}"/>
</Expander.Header>
<!--This will take time to be instancied-->
<!--<local:TimeConsumingControl />-->
<!--Rest of the data template-->
<Border Margin="4" BorderBrush="Black" BorderThickness="1" MinHeight="40" CornerRadius="3" Padding="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<!--<RowDefinition />-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="Name : " Grid.Row="0" FontWeight="Bold" HorizontalAlignment="Right" />
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" />
<TextBlock Text=" - Age : " Grid.Column="2" Grid.Row="0" FontWeight="Bold"
HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Grid.Row="0" Text="{Binding Age}" />
</Grid>
</Border>
</Expander>
</Grid>
</DataTemplate>
How can I prevent the items from collapsing. I still want to use Virtualization.

Related

Data Grid Template [WPF]

how this type of data grid template can be created??
i can't find any way to make this template.
or can u suggest other way??
i.e. grid view or so and how!
The last column are not required as of now.
CodeBehind:
var pp = from asd in db.OrderMasters
select new
{
asd.CFN,
asd.Location,
asd.CreatedOn,
asd.Quantity
};
dgOrderMaster.ItemsSource = pp.ToList();
Markup:
<DataGrid x:Name="dgOrderMaster" HorizontalContentAlignment="Center" BorderThickness="1" Margin="10" Grid.Row="3">

i worked around, and found listview is way more helpfull for my task,
Here's the markup:
<ListView Name="lvDataBinding" HorizontalContentAlignment="Stretch" BorderThickness="0" Margin="10" Grid.Row="3" Background="{x:Null}">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="0" CornerRadius="3" Margin="0,3" Grid.ColumnSpan="4" Background="White">
<Grid Background="White" Margin="0,1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Margin="50,5" >
<TextBlock Text="Customer" Foreground="#33B6EF" FontSize="20" />
<TextBlock Text="{Binding cust}" FontSize="20" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1">
<TextBlock Text="Location" Foreground="#33B6EF" FontSize="20" />
<TextBlock Text="{Binding loc}" FontSize="20" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<TextBlock Text="Created On" Foreground="#33B6EF" FontSize="20" />
<TextBlock Text="{Binding con}" FontSize="20" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="3">
<TextBlock Text="Quantity" Foreground="#33B6EF" FontSize="20" />
<TextBlock Text="{Binding quant}" FontSize="20" />
</StackPanel>
</Grid>
<Border.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="5" />
</Border.Effect>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Creating multiple tabitems from tabitem template in WPF C# XAML

I read many tutorials from MSDN about WPF styling and datatemplating and contenttemplating but no success.
I need to make same TabItems in my TabControl and I made manually TabItem which i want to use as host for Style and ContentTemplate for other TabItems in TabControl
<TabItem Header="1.semestar">
<Grid x:Name="GridSemestra">
<Grid.DataContext>
<ViewModel:PredmetVM/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<Grid.Children>
<ListBox x:Name="PredmetiLW" Grid.Row="0" BorderThickness="0" Grid.Column="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Naziv}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="RadioLW" Grid.Row="0" Grid.Column="1" BorderThickness="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Ocjena}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="Prosjek Semestra :" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
<Label x:Name="_prosjekSemestra" Grid.Row="1" Grid.Column="1" ContentStringFormat="F2" Content="{Binding _prosjek, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Content="Ostvareni ECTS-ovi :" HorizontalAlignment="right" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" />
<Label x:Name="_ectsSemestra" Grid.Row="2" Grid.Column="1" Content="{Binding _ectsovi, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid.Children>
</Grid>
</TabItem>

This is how you define a style for any TabItem. In the example I created a white border and a black background for the Header content of the TabItem:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border BorderBrush="White" BorderThickness="5" Margin="2">
<Grid Width="100" Height="100" Background="Black">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

If you want your items to render with same template set the ItemTemplate for your TabControl like below:
<TabControl ItemsSource="{Binding MyTabItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="GridSemestra">
<Grid.DataContext>
<ViewModel:PredmetVM/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<Grid.Children>
<ListBox x:Name="PredmetiLW" Grid.Row="0" BorderThickness="0" Grid.Column="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Naziv}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="RadioLW" Grid.Row="0" Grid.Column="1" BorderThickness="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Ocjena}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="Prosjek Semestra :" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
<Label x:Name="_prosjekSemestra" Grid.Row="1" Grid.Column="1" ContentStringFormat="F2" Content="{Binding _prosjek, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Content="Ostvareni ECTS-ovi :" HorizontalAlignment="right" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" />
<Label x:Name="_ectsSemestra" Grid.Row="2" Grid.Column="1" Content="{Binding _ectsovi, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid.Children>
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
Doing this, for all the items in property MyTabItems, TabItems will be generated

Page scrollbar windows 8

my problem is that I have only scrollbar for gridview but don't have scrollbar for entire page. Scrollbar should be at the bottom of the page, horizontal. I tried to add scrollbar to the bottom, but it doesn't appear on the page. I've also posted a link to the picture for better understanding. http://i40.tinypic.com/2rm0389.png Sorry that i have only a link, because i need 10 reputation to post images here, it is so bad.
Thanks in advance.
Here is my code (XAML), not entire page, my scrollbar at the bottom:
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="Профиль" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<Grid Width="Auto" Margin="0,5,0,0" Grid.Row="1"
>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ProfileImage}" Stretch="UniformToFill" HorizontalAlignment="Left" Height="270" Margin="165,46,0,0" VerticalAlignment="Top" Width="225"/>
<TextBlock Text="{Binding Name}" HorizontalAlignment="Left" Margin="165,5,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="41" Width="252" FontSize="22" FontWeight="Bold"/>
<GridView x:Name="GridViewToFrinedsPhoto" Margin="461,0,0,0"
ItemsSource="{Binding Mode=TwoWay, Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource MyPhotoItemTemplate}"
SelectionMode="Single"
IsItemClickEnabled="True"
IsSwipeEnabled="false" ItemClick="GridViewToFrinedsPhoto_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
x:Name="ColumnBtn"
AutomationProperties.Name="Group Title" AutomationProperties.LabeledBy="{Binding Title}"
Style="{StaticResource TextPrimaryButtonStyle}" Click="Button_Click_1">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<ScrollBar VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="Auto" RenderTransformOrigin="0.588,-0.824" Visibility="Visible" Margin="0,0,0,603" Orientation="Horizontal" /> -- HERE IS MY SCROLLBAR, DOESN'T WORK :[
</Grid>
</Grid>

My Final code, i hope it helps someone else, I have used scrollviewer and grid container, thanks to Vishal Kaushik from MSDN
<common:LayoutAwarePage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:VKClient.Views"
xmlns:common="using:VKClient.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vkControls="using:VKClient.VkControls"
xmlns:Controls="using:Callisto.Controls"
x:Name="pageRoot"
x:Class="VKClient.Views.ProfileViewPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Mode=Self}}"
mc:Ignorable="d">
<common:LayoutAwarePage.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="../Resources/MyStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
<CollectionViewSource x:Name="groupedItemsViewSource"
Source="{Binding Items, Mode=TwoWay}"
IsSourceGrouped="True"
ItemsPath="Items"/>
</ResourceDictionary>
</common:LayoutAwarePage.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<common:LayoutAwarePage.BottomAppBar>
<AppBar x:Name="BottomAppBar2" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button x:Name="MyProfileButton" Style="{StaticResource MyProfileAppBarButtonStyle}" Click="MyProfileClicked" />
<Button x:Name="MyFriendsButton" Style="{StaticResource MyFriendsAppBarButtonStyle}" Click="MyFriendsClicked"/>
<Button x:Name="MyPhotoButton" Style="{StaticResource MyPhotoAppBarButtonStyle}" Click="MyPhotoClicked" />
<Button x:Name="MyVideosButton" Style="{StaticResource MyVideoesAppBarButtonStyle}" Click="MyVideoesClicked"/>
<Button x:Name="MyAudioButton" Style="{StaticResource MyAudioAppBarButtonStyle}" Click="MyAudioClicked"/>
<Button x:Name="MyGroupsButton" Style="{StaticResource MyGroupsAppBarButtonStyle}" Click="MyGroupsClicked"/>
<!-- <Button x:Name="MyMessagesButton" Style="{StaticResource MyMessagesAppBarButtonStyle}" Click="MyMessagesClicked"/>
<Button x:Name="MyNewsButton" Style="{StaticResource MyNewsAppBarButtonStyle}" Click="MyNewsClicked"
/> -->
</StackPanel>
</Grid>
</AppBar>
</common:LayoutAwarePage.BottomAppBar>
<Grid Style="{StaticResource LayoutRootStyle}" Background="{StaticResource AccentBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid used in most view states -->
<!-- Vertical scrolling list only used when snapped -->
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="Профиль" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<Grid Width="Auto" Margin="0,5,0,0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"/>
</Grid.ColumnDefinitions>
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled">
<Grid Width="Auto">
<Controls:LiveTile HorizontalAlignment="Left" Margin="20,101,0,0" VerticalAlignment="Top" Width="109" Height="137" Background="LightGreen">
<Controls:LiveTile.ItemTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Style="{StaticResource MyGroupsAppBarButtonStyle}" Margin="0,0,0,41" Grid.RowSpan="2"/>
<HyperlinkButton
HorizontalAlignment="Right"
Foreground="LightGray"
Click="GroupClicked" Height="129" Grid.RowSpan="2" Width="90" />
</Grid>
</DataTemplate>
</Controls:LiveTile.ItemTemplate>
</Controls:LiveTile>
<Controls:LiveTile HorizontalAlignment="Left" Margin="20,273,0,0" VerticalAlignment="Top" Width="109" Height="151" Background="Violet">
<Controls:LiveTile.ItemTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Style="{StaticResource MyAudioAppBarButtonStyle}" Margin="0,0,0,41" Grid.RowSpan="2"/>
<HyperlinkButton
HorizontalAlignment="Right"
Foreground="LightGray"
FontSize="9" FontWeight="Bold" Click="ProfileAudios" Height="139" Grid.RowSpan="2" Width="99" />
</Grid>
</DataTemplate>
</Controls:LiveTile.ItemTemplate>
</Controls:LiveTile>
<Image Source="{Binding ProfileImage}" Stretch="UniformToFill" HorizontalAlignment="Left" VerticalAlignment="Top" Height="270" Margin="165,46,0,0" Width="225"/>
<TextBlock Text="{Binding Name}" Margin="165,5,0,577" TextWrapping="Wrap" HorizontalAlignment="Left" Height="41" Width="252" FontSize="22" FontWeight="Bold"/>
<GridView x:Name="GridViewToFrinedsPhoto" Margin="461,0,0,0"
ItemsSource="{Binding Mode=TwoWay, Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource MyPhotoItemTemplate}"
SelectionMode="Single"
IsItemClickEnabled="True"
IsSwipeEnabled="false" ItemClick="GridViewToFrinedsPhoto_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
x:Name="ColumnBtn"
AutomationProperties.Name="Group Title" AutomationProperties.LabeledBy="{Binding Title}"
Style="{StaticResource TextPrimaryButtonStyle}" Click="Button_Click_1">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
</ScrollViewer>
</Grid>
</Grid>

Reusable DataTemplate. How to specify? Need syntax assistance

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}">
...

How do I have ListBox items fill the entire space?

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.

Categories

Resources