I have a simple Border and Grid that is positioned within a Canvas container in WPF. The position of the control changes during runtime hence why it resides in the canvas.
The XAML for the control looks something like this:
<Border Name="PopupArea"
Width="130"
Height="150"
BorderBrush="Black"
BorderThickness="2"
CornerRadius="5">
<Border.Background>
<SolidColorBrush Opacity="0.5" Color="Black" />
</Border.Background>
<Grid>
<StackPanel>
<Border HorizontalAlignment="Center">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<TextBlock FontWeight="Bold" Style="{StaticResource SmallWhiteFont}">HELLO WORLD</TextBlock>
</Border>
</StackPanel>
</Grid>
</Border>
However I now need to be able to create a Collection of the above control which I create and destory as required at runtime in code.
My questions are :
A. What is the best way to compose my XAML to create multiple instances of the above control through code? Do I just declare a ContentControl in the resources?
B. Assuming I am correct and a resource template is required. How do I actually use it to create multiple instances of the control in code?
Within XAML I would use an ItemTemplate.
Then I would bind ItemsSource to some observable collection on my viewmodel.
Here's an example taken from MSDN:
<ListBox Width="400" Margin="10"
ItemsSource="{Binding Source={StaticResource myTodoList}}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=TaskName}" />
<TextBlock Text="{Binding Path=Description}"/>
<TextBlock Text="{Binding Path=Priority}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
NOTE:
It is more common to define a DataTemplate in the resources section so it can be a reusable object.
<ListBox Width="400" Margin="10"
ItemsSource="{Binding Source={StaticResource myTodoList}}"
ItemTemplate="{StaticResource myTaskTemplate}"/>
Related
I have a XAML page in a Windows 8.1 Store App. I set the data context for a ListView but I initially have it collapsed. What I am trying to do is toggle the visibility of some of the elements in the ListView before making it visible. But it doesn't load them unless it becomes visible. So, to forced it to load the items, I am trying to set "IsVirtualizing" to false so that I don't have to worry about it (and I don't mind the hit in performance since I won't have that many items). But for all the examples I look at, all I get is
The property "IsVirtualizing" does not have an accessible setter.
Not sure what is going on here.
Here is the relevant piece of code with the other contents stripped out.
<common:LayoutAwarePage
x:Class="FlashMe.DeckView"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FlashMe"
xmlns:common="using:FlashMe.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<ScrollViewer x:Name="deckScrollViewer" Grid.Row="1" VerticalScrollMode="Disabled" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="0,15,0,0">
<StackPanel x:Name="deckStackPanel" Orientation="Horizontal">
<Grid Width="100" x:Name="MarginBuffer" />
<ListView x:Name="cardsListViewDisplay" Visibility="Collapsed" SelectionMode="None" Width="500" ItemsSource="{Binding Path=FlashCardsAsList}" VirtualizingStackPanel.IsVirtualizing="False">
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<StackPanel Orientation="Vertical" Width="490" Height="400" RightTapped="FlashCardRightClicked">
<Grid Width="490" Height="200" Background="Gainsboro">
<TextBlock Text="{Binding Path=Front}"
Foreground="Black"
Style="{StaticResource GroupHeaderTextStyle}"
Margin="4,0,4,4"
FontWeight="SemiBold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap"
MaxWidth="410"/>
</Grid>
<Grid Width="500" Height="200" Background="{Binding ElementName=deckStackPanel, Path=DataContext.DeckColorBrush}">
<TextBlock Text="{Binding Path=Back}"
Foreground="White"
Style="{StaticResource GroupHeaderTextStyle}"
Margin="4,0,0,4"
FontWeight="SemiBold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap"
MaxWidth="410"/>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
</common:LayoutAwarePage>
In Windows Store Apps, the IsVirtualizing property is read-only.
From the Remarks section on the VirtualizingStackPanel.IsVirtualizingProperty page on MSDN:
VirtualizingStackPanel.IsVirtualizing is an atypical attached property
because it does not have a Set accessor, and thus is not really a XAML
attached property with a markup usage. Instead,
VirtualizingStackPanel.IsVirtualizing functions as a sentinel whereby
child elements can query the VirtualizingStackPanel parent, and
determine whether virtualization is being used. ...
I want a DataTemplate for ListBox having the ItemsSource as Collection of Borders. Inside each Border i want to display another ListBox containg set of some items having its own ItemsSource.
But, when i try to acheive this structure i am not able to populate any data.
My XAML code -
<Grid x:Name="RightPanel" Grid.Column="2" Background="Beige">
<Border BorderBrush="Black" Margin="4" BorderThickness="1.5">
<ScrollViewer Margin="2" Focusable="False">
<ListBox x:Name="MainRightListBox" ItemsSource="{Binding ListBoxCollection,Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBox x:Name="ChildListBox" ItemsSource="{Binding CurrentPage.ClonedVectorImages,Mode=TwoWay}" SelectedItem="{Binding ImageVectorSelected}" BorderBrush="Transparent" Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="canvas" Background="Transparent" Orientation="Horizontal" Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}}">
<StackPanel.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete" CommandParameter="{Binding}"
Command="{Binding PlacementTarget.Tag.DataContext.DeleteCloneCommand, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}, Mode=FindAncestor}}"/>
</ContextMenu>
</StackPanel.ContextMenu>
<Viewbox Width="35" Height="35" >
<Canvas Width="35" Height="35">
<Canvas>
<Path Fill="#ffda2526" Data="F1 M 0.000,112.500 C 0.000,50.369 50.368,0.000 112.500,0.000 C 174.632,0.000 225.000,50.369 225.000,112.500 C 225.000,174.633 174.632,225.000 112.500,225.000 C 50.368,225.000 0.000,174.633 0.000,112.500 Z" Height="30.667" Stretch="Fill" Width="31"/>
<TextBlock x:Name="tb1" Text="{Binding CountId}" Foreground="WhiteSmoke" FontSize="20" FontFamily="Arial Bold" Height="20" RenderTransformOrigin="1.588,1.224" Canvas.Left="9.322" Canvas.Top="3.335"></TextBlock>
</Canvas>
</Canvas>
</Viewbox>
<TextBox Text="Enter Text Here" Height="20" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Border>
</Grid>
"Can a DataTemplate be placed inside another DataTemplate of different Template Structure?"
The answer is yes, it can. Your XAML structure is fine.
But what possibly wrong is binding path/expression used. You need to be aware that DataContext of the inner ListBox (the one inside DataTemplate) is corresponding item in ListBoxCollection. So if that item mentioned before has property CurrentPage.ClonedVectorImages, this way of binding should work fine to populate the inner ListBox :
<ListBox x:Name="ChildListBox"
ItemsSource="{Binding CurrentPage.ClonedVectorImages,Mode=TwoWay}"
........>
You need to put DataTemplates in resources with the corresponding keys, because otherwise an exception may occur:
Markup.IStyle.Connector.Connect error
This is bug of studio, which is described as follows link:
A good way to look at this problem “Templating is like parentheses, quoting parentheses” the Template XAML is not created but saved and run later. The bug is therefore: We have a problem with nested parentheses.
In any case as I think, should be avoided nesting templates and use him via resources, it will be easier and clearer.
I'm currently trying to figure out how to show different types of objects in a GridView, look at this Pic for example:
the last element on the right side is different than the other elements, so if i bind an observablecollection to the GridView, how can i say that the last element is shown up in anohter layout.
currently I'm using this XAML-Code
<GridView x:Name="startView" ItemsSource="{Binding}" Grid.Column="1" Grid.Row="2" SelectionMode="None" Width="Auto">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
<Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
and this Code in the Back:
ObservableCollection<Movie> recentlyStarted = await Api.RecentlyStarted(3);
startView.DataContext = recentlyStarted;
but I have currently no clue how to let the last element show up in a different style
The easy way would be to have the two types of object as different classes (e.g. MoviePicStyle + MoviePlainStyle. Then move your DataTemplate out of the GridView, so that each object is picked up by type,
e.g.
<Window.Resources>
<DataTemplate DataType="{x:Type ViewModel:MoviePicStyle}">
<StackPanel>
<TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
<Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
</StackPanel>
<DataTemplate DataType="{x:Type ViewModel:MoviePlainStyle}">
...Different View...
</DataTemplate>
</Window.Resources>
<GridView...
Use template selector property of gridview and depending upon the type of object select the template. I did the same in my project. you need to write your own DataTemplateSelector.
I referred below link
http://babaandthepigman.wordpress.com/2012/02/08/datatemplateselector-winrt/
So I've seen lots and lots of examples where someone has a nifty data template with a control in it and their content control is applying the template and their code behind needs to grab it.
But what I have is this:
<DataTemplate x:Key="frontTemplate" >
<StackPanel x:Name="noWork">
<Image Source="Images/1.png" Stretch="Fill" Width="72" Height="96" x:Name="FrontFace" HorizontalAlignment="Left" VerticalAlignment="Top"></Image>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="flipItemTemplate">
<Grid Width="200" Height="200">
<Border x:Name="frontHost" Background="Transparent">
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource frontTemplate}" />
</Border>
</Grid>
</DataTemplate>
You can see that I have a data Template (frontTemplate) nested inside of another data template (flipItemTemplate). What I need to do is get access to the Stackpanel in frontTemplate. All of my attempts to get to the content presenter for that datatemplate have failed. I am hoping that the wise sages of StackOverflow can help me. How in god's name would I get to that panel????
Thanks!!
If your XAML is defined like this:
<Grid Name="mainGrid">
<Grid.Resources>
<DataTemplate x:Key="frontTemplate" >
<StackPanel x:Name="noWork">
<Image Source="Images/1.png" Stretch="Fill" Width="72" Height="96" x:Name="FrontFace" HorizontalAlignment="Left" VerticalAlignment="Top"></Image>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="flipItemTemplate">
<Grid Width="200" Height="200">
<Border x:Name="frontHost" Background="Transparent">
<ContentPresenter Name="contentPresenter" Content="{Binding}" ContentTemplate="{StaticResource frontTemplate}" />
</Border>
</Grid>
</DataTemplate>
</Grid.Resources>
</Grid>
You can use:
var template = mainGrid.FindResource("frontTemplate") as DataTemplate;
var stackPanel = template.LoadContent() as StackPanel;
I have ListBox in my WPF project that gets set to a datasource of "MyObjectCollection".
I have managed to get the ListBox to display my collection, and each item to display two string properties from the object. The object also contains an Image, how do i get the image to display in the ListBox?
I am currently using the below code to bind to my DataSource
<UserControl.Resources>
<DataTemplate x:Key="CustomerTemplate">
<Border BorderThickness="2" BorderBrush="silver" CornerRadius="5" Padding="1"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid>
<Image Source="{Binding Artwork}" Tag="{Binding Artwork}" VerticalAlignment="Stretch" ></Image>
<TextBlock Text="{Binding Name}" Foreground="#515151"
FontSize="16" HorizontalAlignment="Stretch"
FontWeight="Bold" />
<TextBlock Text="{Binding Length}" Foreground="#515151" Margin="0,25,0,0"
FontSize="10" HorizontalAlignment="Stretch"
FontWeight="Bold" />
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
Thanks,
Ben
It depends on the image type in your collection.
If it is a path string to a file or if it is a byte array.
You should use ValueConverter for your image binding.
Take a look at ValueConverter