DataTemplate.DataTriggers not found? - xaml

A pretty strange thing happens when trying to use DataTemplate.DataTriggers in my XAML for Windows 8 Metro app.
In my App.xaml, I am defining template for my data. I'd like to use the DataTriggers, but when I type it my VS2012 editor, I get errors stating that
The attachable property 'DataTriggers' was not found in type 'DataTemplate'.
and
The member "DataTriggers" is not recognized or is not accessible.
A similar issue happens when I try to set the DataType property for DataTemplate:
The property 'DataType' was not found in type 'DataTemplate'.
What am I missing here? The DataTemplate works fine without these things, but still it would be much easier for me to use them in my project. Here a short snippet of my XAML:
<DataTemplate x:Key="MyTemplate" >
<Grid HorizontalAlignment="Left" Width="450" Height="100">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.RowSpan="3" Stretch="UniformToFill" Width="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF425400" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="{Binding Teaser}" Style="{StaticResource SubtitleTextStyle}" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2"/>
<TextBlock Text="{Binding Content}" Style="{StaticResource BasicTextStyle}" Grid.Column="1" Grid.Row="2" />
<TextBlock Text="{Binding TimeDesc}" Style="{StaticResource BasicTextStyle}" Grid.Column="2" Grid.Row="2" />
</Grid>
<DataTemplate.DataTriggers>
</DataTemplate.DataTriggers>
</DataTemplate>

Triggers are only available in WPF, and not on any of the other XAML platforms. Common alternatives are VisualStates, converters, or making changes from code.

Related

SOLVED Pressing on ScrollViewer inside ListBox Item doesn't select the Item

I gave a ListBox that lists items. The items, can vary in size, but follow the same pattern:
picture................Metadata
ID
<ListBox Name="View" Grid.Row="2" ItemsSource="{Binding Human, ElementName=uc}"
SelectedItem="{Binding SelectedHuman, ElementName=uc}"
MouseDoubleClick="OnSubjectEditClick"
VerticalContentAlignment="Center"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.CanContentScroll="True"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="#565656" BorderThickness="1" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="300" />
<RowDefinition MaxHeight="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="300" MaxWidth="500" SharedSizeGroup="col1"/>
<ColumnDefinition MaxWidth="500" Width="*" SharedSizeGroup="col2"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" MaxHeight="300" MaxWidth="300" Source="{Binding Thumb}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Name}" FontWeight="Bold" TextAlignment="Center"/>
<local:MetadataView Grid.Column="1" Grid.RowSpan="2" Metadata="{Binding Metadata}" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsEdit="False" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The items inside Metadata .xaml looks like this. StackPanels containing actual Metadata are automatically generated by code inside "DisplayMode":
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
...........
<StackPanel/> //AutoGenerated
............
</StackPanel>
</ScrollViewer>
</Grid>
The problem I'm facing is the fact, that I need to be able to select an item inside the ListBox. But, by adding ScrollViewer in Metadata.xaml it seems I Reroute the selector, so it is trying to select an item in Metadata ScrollViewer instead of ListBox when I press the part of the ListBox containing Metadata. If I press on Thumbnail, or even RightClick on any part of the ListBox - it seems to select just fine.
[SOLVED] After playing around with available options in ScrollViewer I stumbled across Focusable. Setting it to False did the trick.
I hope it will help someone in the future.
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" Focusable="False" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
</StackPanel>
</ScrollViewer>
</Grid>

How do i extract an item out of a session object?

Still learning visual studio and it's elements :-)
My question is as follows...
How do i extract "for example" the [clientname] out of session object using a xaml resource designer?
The session it's self is "CurrentSession" realistically i would like this to be dynamic so that i could use my listview template on any listview. I have been following the courses Here and this has helped me immensely but i cannot seem to work out how to do this from a session object, any help would be greatly appreciated :-)
a part of my xaml designer for a listview....
<DataTemplate x:Key="templateListBoxItem">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
Margin="0,0,10,0">
<Image Source="{DynamicResource IMS}"
Stretch="Fill"
Height="20"
Width="20"/>
</Border>
<ItemsControl ItemsSource="{Binding CurrentSession[clientName]}">
<TextBlock Text="{Binding clientName}"
Grid.Row="0"
Grid.Column="1"
FontWeight="Bold"/>
</ItemsControl>
</Grid>
</DataTemplate>

Static header on UWP

I'm currently trying to create a header like in the Windows 10 Mobile settings app, which you can see below.
I have tried AppBar and SplitViews, however they do not fit my requirements. How can I create a header similar to this one?
There is no control that does that for you, but you can easily create such a header by your own:
<Grid
x:Name="Header"
Height="50"
VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox
Width="50"
MaxWidth="50"
MaxHeight="25">
<SymbolIcon
HorizontalAlignment="Left"
VerticalAlignment="Top"
Foreground="#FF1BA1E3"
Symbol="Setting" />
</Viewbox>
<TextBlock
Grid.Column="1"
Margin="10,0,0,0"
VerticalAlignment="Center"
Foreground="White"
Style="{StaticResource BaseTextBlockStyle}"
Text="SETTINGS" />
</Grid>

Context Menu Command not Working

I'm working on a Windows Phone 8 app and I have some problems with a ContextMenu of a List Box. I use the toolkit ContextMenu in the ListBoxItemTemplate as follow:
<DataTemplate x:Key="ListBoxItemTemplate">
<Grid Height="50" Background="#11414141"
Margin="0,1,0,1">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Remove Transaction" Command="{Binding DataContext.RemoveTappedElementCommand}" CommandParameter="{Binding}"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="180"/>
</Grid.ColumnDefinitions>
<!--<StackPanel Grid.Column="0" Background="{Binding IsIncome, Converter={StaticResource TypeToColorConverter}}"/>-->
<StackPanel Grid.Column="0" Background="#FFFB7C26"/>
<TextBlock Grid.Column="1"
Text="{Binding Date, StringFormat=dd/MM}"
VerticalAlignment="Center"
Margin="6,0,6,0"/>
<TextBlock Grid.Column="2"
Text="{Binding Capitolo}"
TextTrimming="WordEllipsis"
VerticalAlignment="Center"/>
<Grid Grid.Column="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Amount, StringFormat=C}"
Grid.Column="0"
Foreground="{Binding IsIncome, Converter={StaticResource TypeToColorConverter}}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
FontSize="25"
FontWeight="SemiBold"
Margin="4,0,4,0"/>
<TextBlock Text="{Binding IsIncome, Converter={StaticResource TypeToSignStringConverter}}"
Grid.Column="1"
Foreground="{Binding IsIncome, Converter={StaticResource TypeToColorConverter}}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="25"
FontWeight="SemiBold"/>
</Grid>
</Grid>
</DataTemplate>
I'm using MVVM pattern, so I tried to bind Command propery of the MenuItem to an ICommand of the ViewModel. But when I click on the MenuItem of the context menu, nothing happens, the command is not fired and I can't figure out the reason. Any help will be very appreciated.
There is a problem in your binding:
Command="{Binding DataContext.RemoveTappedElementCommand}"
This will not look for the RemoveTappedElementCommand on the top-level DataContext, but will instead look for the property DataContext on your item view model.
To realy bind to the DataContext of the Page/Control contatining the ListBox, give that item a name
x:Name="Root"
and expand your binding:
Command="{Binding ElementName=Root, Path=DataContext.RemoveTappedElementCommand}"

XAML Listview Windows 8.1 Hiding First Entry

I'm having trouble with what seems to be a weird issue with a listview in xaml for Windows 8.1. I'm using the Hub sample template that comes with VS 2013 Preview on Windows 8.1. For whatever reason, the first entry in the listview does not show up. I'm binding the listview with the sample JSON data provided in the app. It doesn't make a difference whether I bind to the sample data or to my own data in a sqlite db file either. I'd post a picture, but I dont have enough reputation on stackoverflow just yet... The intent is to represent data in a table with columns. Everything in the xaml works except that it hides the first entry in the listview...
Here's the code.
<Grid x:Name="TransactionGrid" Grid.Column="1" Grid.Row="1"
Background="{ThemeResource AppBarItemBackgroundThemeBrush}"
DataContext="{Binding Group}"
d:DataContext="{Binding Groups[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="TransactionHeader" Margin="0,0,0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition Width="1.25*"/>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".25*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="Date"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Center" Margin="0,0,0,5"/>
<TextBlock Grid.Column="1"
Text="Payee"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="2"
Text="Category"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="3"
Text="Description"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="4"
Text="Amount"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Right" Margin="0,0,0,5"/>
<TextBlock Grid.Column="5"
Text="Balance"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Right" Margin="0,0,0,5"/>
</Grid>
<ListView x:Name="TransactionListview"
Grid.Row="1"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSynchronizedWithCurrentItem="False" IsItemClickEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ElementName=TransactionListview, Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition Width="1.25*"/>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".25*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
Width="Auto"
Height="40"
Grid.ColumnSpan="7" />
<TextBlock Grid.Column="0"
Text="{Binding Title}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin = "1,0,0,0"
FontSize="17" />
<TextBlock Grid.Column="1"
Text="{Binding Subtitle}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="2"
Text="{Binding ImagePath}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="3"
Text="{Binding Description}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin = "0,0,20,0"
FontSize="17"/>
<TextBlock Grid.Column="4"
Text="{Binding Title}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="5"
Text="{Binding Title}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontSize="17"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
This was cross-posted to MSDN forum where product team is answering:
http://social.msdn.microsoft.com/Forums/windowsapps/en-US/8b9f3365-97d5-4405-a677-7b8638a32312/xaml-listview-in-win-81-not-showing-first-entry