I am new to pivotviewer and also to silverlight. I have created a observablecollection which has
the properties
public string StaffName { get; set; }
public string Location {get;set;}
using a method BuildCollection() I bind it to mainpage.xaml in the following manner:
<pivot:PivotViewer x:Name="pViewer">
<pivot:PivotViewer.ItemTemplates>
<pivot:PivotViewerItemTemplate MaxWidth="300">
<Border Width="300" Height="300"
<TextBlock Text="{Binding StaffName}"
FontSize="90"
FontWeight="Bold"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</pivot:PivotViewerItemTemplate>
</pivot:PivotViewer.ItemTemplates>
</pivot:PivotViewer>
Now I want to bind the CXML file cities.cxml which resides in the clientbin which has the images and also the property called Location. I want to create a link between the collection and the cxml so that when i deepzoom the collection which shows the staffname it should fade into the image of the city which is in the cxml collection. for ex Location is london in observable collection I should be deepzoom it to the image of london from the cxml file. Can anyone help in achieving this? Thanks.
First the observable collection was bound. Here I added a property called img in the observable collection which represents the image index in the xml file
I bound the xml file to another template and in the subimagehost I bound the img index therefore on deepzooming the observable collection I got the image also
<pivot:PivotViewerItemTemplate>
<Grid Width="800" Height="800" Background="LightGray" MaxWidth="800">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="{Binding StaffName, Converter={StaticResource xconv}}"/>
<pivot:PivotViewerMultiScaleSubImageHost CollectionSource="http://localhost:65535/ClientBin/Map_files/wr5bbwrn.dre.xml" ImageId="{Binding img}" >
</pivot:PivotViewerMultiScaleSubImageHost>
<TextBlock Text="{Binding Vehicle}"
FontSize="40"
Margin="150,200,150,150"
Grid.Column="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"/>
</Grid>
</pivot:PivotViewerItemTemplate>
Related
I have a ListView that uses a custom ItemTemplate (doesn't everyone?):
<ListView>
<!-- ... -->
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<MyGreatControl Thing="{x:Bind}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
MyGreatControl today has extensive keyboard handling code built-in, but due to some refactoring, I need to move the actual handlers to the ListView itself. However, I don't want to move all of the code in MyGreatControl to the ListView (for many reasons).
If I have an arbitrary ListViewItem (which, for example, I can get from an event handler), how can I access the MyGreatControl instance in its DataTemplate?
MyGreatControl^ GetMyGreatControlFromListViewItem(ListViewItem^ listViewItem) {
// ???
}
Disclaimer: I work for Microsoft.
You want to use ContentTemplateRoot!
MyGreatControl^ GetMyGreatControlFromListViewItem(ListViewItem^ listViewItem) {
return safe_cast<MyGreatControl^>(listViewItem->ContentTemplateRoot);
}
This also works for any arbitrary element—if you have a StackPanel, for example, ContentTemplateRoot will return the StackPanel instance you want:
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<StackPanel><!-- This is what you get! -->
<TextBlock Text="{x:Bind}" />
<Button Content="Foo" IsTabStop="False" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
You can then use normal visual tree navigation to find Children, etc.
I am following Microsoft's documentation to implement a TreeView in a Universal Windows Platform app in C++. I have successfully been able to create a tree view with one node using the following codes:
XAML:
<TreeView x:Name="treeSolution"></TreeView>
C++:
TreeViewNode ^treeNode = ref new TreeViewNode();
treeNode->Content = "Hello";
treeSolution->RootNodes->Append(treeNode);
Now, I want to set the text to bold. I tried the following:
TextBlock ^textBlock = ref new TextBlock();
textBlock->Text = "Hello";
textBlock->FontWeight = Windows::UI::Text::FontWeights::Bold;
treeNode->Content = textBlock;
treeSolution->RootNodes->Append(treeNode);
The code displays Windows.UI.Xaml.Controls.TextBlock instead of Hello in bold.
The documentation says that In Windows 10, version 1803, you have to retemplate the TreeView control and specify a custom ItemTemplate if your content is not a string. It then gives a complex example using the Music and Picture library.
Could somebody provide a simple example of how to display the text in bold? Thanks.
You have to provide a custom style for the whole control in XAML to be able to set the TreeViewItemDataTemplate:
<DataTemplate x:Key="TreeViewItemDataTemplate">
<Grid Height="44">
<TextBlock
Text="{Binding Content}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{ThemeResource BodyTextBlockStyle}"
FontWeight="Bold" />
</Grid>
</DataTemplate>
<Style TargetType="TreeView">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeView">
<TreeViewList x:Name="ListControl"
ItemTemplate="{StaticResource TreeViewItemDataTemplate}"
ItemContainerStyle="{StaticResource TreeViewItemStyle}"
CanDragItems="True"
AllowDrop="True"
CanReorderItems="True">
<TreeViewList.ItemContainerTransitions>
<TransitionCollection>
<ContentThemeTransition />
<ReorderThemeTransition />
<EntranceThemeTransition IsStaggeringEnabled="False" />
</TransitionCollection>
</TreeViewList.ItemContainerTransitions>
</TreeViewList>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm getting my feet wet trying out Windows 10 UWP app development. I've installed Visual Studio 2015 and am currently playing around with trying to figure out how to work with data binding.
The following is my simple XAML:
<Grid>
<Pivot x:Name="docPivot"
ItemsSource="{Binding}">
<Pivot.ItemTemplate>
<DataTemplate>
<PivotItem Header="{Binding Filename}">
<TextBox Text="{Binding Contents}"/>
</PivotItem>
</DataTemplate>
</Pivot.ItemTemplate>
</Pivot>
</Grid>
This is my Mainpage.xaml.cpp in relevant part: (Document is a simple struct that just has two properties, a String Filename and a String Contents.)
MainPage::MainPage()
{
InitializeComponent();
auto docs = ref new Vector<Document^>();
auto doc1 = ref new Document();
doc1->Filename = "Filename1";
doc1->Contents = "Contents 1";
docs->Append(doc1);
auto doc2 = ref new Document();
doc2->Filename = "Filename2";
doc2->Contents = "Contents 2";
docs->Append(doc2);
docPivot->ItemsSource = docs;
}
However, I'm having a pair of issues I can't figure out:
The first is, instead of each PivotItem's header being Filename, they're both MyApp.Document, where MyApp is my namespace.
The second issue is, the TextBox is being properly populated with the contents from the data binding, and the two PivotItems can be switched between, but as soon as I try and select a Textbox, the app crashes with an access violation:
Exception thrown at 0x0004CE1E in MyApp.exe: 0xC0000005: Access violation reading location 0x00000000.
Any input on what I'm doing wrong here?
First you must add Bindable attribute to Document class.
[Windows::UI::Xaml::Data::Bindable]
public ref class Document sealed
And you must add
#include "Document.h"
in Mainpage.xaml.h file not the .cpp file. You Pivot's ItemTemplate should not contain PivotItem, you should do like this
<Grid>
<Pivot x:Name="docPivot">
<Pivot.HeaderTemplate>
<DataTemplate>
<ContentControl Content="{Binding Filename}"/>
</DataTemplate>
</Pivot.HeaderTemplate>
<Pivot.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Contents}"/>
</DataTemplate>
</Pivot.ItemTemplate>
</Pivot>
In an Android project I have this kind of alert dialog:
I want to replicate this in Windows Phone 8, however I haven't been able to find a suitable plugin/widget to do so. The list itself is populated by SharedPreferences.
My plan for Windows 8 was to use Isolated Storage Files to grab the required entries, is this the best way?
<clippy>It looks like you want to display a list to the user and allow them to pick an option </clippy>
If that is the case then you can use the ListPicker from the WP Toolkit. Install the nuget pack and use as such:
<toolkit:ListPicker FullModeHeader="CHOOSE LOCATION" ItemsSource="{Binding Cities}">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Margin="0,20" TextWrapping="Wrap"
Style="{StaticResource PhoneTextExtraLargeStyle}">
<Run Text="{Binding Description}" />
<Run Text="-" />
<Run Text="{Binding Quality}" />
</TextBlock >
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
I'm trying to learn how to separate a view from its associated viewmodel, while making the view have as little or no code-behind as possible.
my control has a textblock when the object is in a display mode, and a textbox when the user wants to edit that field. In both cases, these controls must bind to the same string in the modelview, but only the appropriate one should be displayed depending on the state of the viewmodel. Previously, I'd just modify the panels child to a new element in the codebehind... but as I understand it, I should be trying to make all my changes in XAML for the view.
My viewmodel has a bool denoting if its in display or edit mode. Is there a way to specify use of a different template depending on the value of that bool, but keep it all in XAML?
There is a way to do what you say you're working on, by using DataTriggers.
First, define a Style which contains the DataTriggers you want to use. For example, note here two identical styles for a ContentControl, each with a DataTrigger pair that performs the opposite of the other:
<Window.Resources>
<Style TargetType="{x:Type ContentControl}" x:Key="HiddenWhenFalse" >
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Value="False" Binding="{Binding MyBooleanValue}">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
<DataTrigger Value="True" Binding="{Binding MyBooleanValue}">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type ContentControl}" x:Key="HiddenWhenTrue" >
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding MyBooleanValue}">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
<DataTrigger Value="False" Binding="{Binding MyBooleanValue}">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
Then, in your main visual tree you would define ContentControls which use those Styles, and assign the DataContext of the Window or UserControl or whatever to your ViewModel. Something like this:
<Grid>
<StackPanel >
<Button Content="False" Name="Button2"></Button>
<Button Content="True" Name="Button1"></Button>
<ContentControl Style="{StaticResource HiddenWhenFalse}">
<ContentControl.Content>
<TextBlock Text="ITS ALL TRUE"/>
</ContentControl.Content>
</ContentControl>
<ContentControl Style="{StaticResource HiddenWhenTrue}">
<ContentControl.Content>
<TextBlock Text="ITS ALL FALSE"/>
</ContentControl.Content>
</ContentControl>
</StackPanel>
</Grid>
Here is the ViewModel I'm using, note the implementation of INotifyPropertyChanged:
Imports System.ComponentModel
Public Class MainWindowViewModel
Implements INotifyPropertyChanged
Private _MyBooleanValue = False
Public Property MyBooleanValue
Get
Return _MyBooleanValue
End Get
Set(ByVal value)
_MyBooleanValue = value
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(Nothing))
End Set
End Property
Public Event PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
End Class
Now, for the purposes of this sample, I simply wired up the two buttons to set the ViewModel value. If you want to use Commanding to wire up buttons, that's an entirely different topic. It's worth discussing, but for the sake of simplicity:
Class MainWindow
Private vm As New MainWindowViewModel
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
vm.MyBooleanValue = True
End Sub
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button2.Click
vm.MyBooleanValue = False
End Sub
Private Sub MainWindow_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
Me.DataContext = vm
End Sub
End Class
Bear in mind that this sample explicitly styles a ContentControl, and that you'll have to change the TargetType of your style if you're working with a type that isn't descended from that class.