Overriding base Silverlight controls to display only text - silverlight-4.0

I'm trying to create custom controls derived from the framework controls that have the added functionality of rendering themselves as a TextBlock. I'm doing this because the built-in IsEnabled or IsReadOnly properties don't meet my needs. However, I don't see any overridable methods in the control that would give me the functionality I need.
Am I headed down the right path? If not, is there a better way to do this?

Ok, this example is thrown together - keep that in mind. You'll notice that Im using some telerik controls... but you should be able to get the gist of what im doing. Also, in this example i threw together, im not using a DataTemplateSelector... just selecting the template in the code behind.
Rough sketch of xaml...
<UserControl x:Class="Admin.ManagePositions"
...
Title="MainWindow"
Width="525"
Height="350">
<UserControl.Resources>
<DataTemplate x:Key="ReadPositionTemplate">
<StackPanel>
<TextBlock Text="{Binding PositionCode}" Style="{StaticResource H5}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<telerik:RadButton x:Name="btnEdit" Content="Edit" Click="btnEdit_Click" Command="{Binding DataContext.EditPositionCommand, ElementName=ucManagePositions}" />
<telerik:RadButton x:Name="btnDelete" Content="Delete Position" Style="{StaticResource AutoSizeButton}" Click="btnDelete_Click" Command="{Binding DataContext.DeletePositionCommand, ElementName=ucManagePositions}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="EditPositionTemplate">
<StackPanel>
<sdk:Label Target="{Binding ElementName=txtPositionCode}" />
<TextBox x:Name="txtPositionCode" Text="{Binding PositionCode, Mode=TwoWay, ValidatesOnExceptions=True,NotifyOnValidationError=True}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<telerik:RadButton x:Name="btnSaveEdit" Content="Save" Click="btnSaveEdit_Click" Command="{Binding DataContext.SavePositionCommand, ElementName=ucManagePositions}" />
<telerik:RadButton x:Name="btnCancelEdit" Content="Cancel" Click="btnCancelEdit_Click" Command="{Binding DataContext.ResetHighlightPositionCommand, ElementName=ucManagePositions}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<Grid>
<telerik:RadTransitionControl x:Name="selectedPositionContainer" Loaded="selectedPositionContainer_Loaded" Content="{Binding HighlightedPosition}">
<telerik:RadTransitionControl.Transition>
<telerik:SlideAndZoomTransition />
</telerik:RadTransitionControl.Transition>
</telerik:RadTransitionControl>
</Grid>
</UserControl>
And a rough outline of the code behind:
namespace Admin
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class ManagePositions : UserControl {
public MainWindow()
{
InitializeComponent();
}
private void btnEdit_Click(object sender, RoutedEventArgs e)
{
DataTemplate dt = ucManagePositions.Resources["EditPositionTemplate"] as DataTemplate;
selectedPositionContainer.ContentTemplate = dt;
}
private void btnCancelEdit_Click(object sender, RoutedEventArgs e)
{
DataTemplate dt = ucManagePositions.Resources["ReadPositionTemplate"] as DataTemplate;
selectedPositionContainer.ContentTemplate = dt;
}
private void selectedPositionContainer_Loaded(object sender, RoutedEventArgs e)
{
DataTemplate dt = ucManagePositions.Resources["ReadPositionTemplate"] as DataTemplate;
selectedPositionContainer.ContentTemplate = dt;
}
}
}
Hope that helps!

Related

Bind a click event to a dynamically generated button element in a templated control / template control

I have a templated control in my UWP application which contains a ListView. The ListView is populated in the runtime.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Renderer"
xmlns:triggers="using:Microsoft.Toolkit.Uwp.UI.Triggers">
<Style x:Key="RendererDefaultStyle" TargetType="local:Renderer" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Renderer">
<Grid>
....
<ListView x:Name="AnnotsList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1" VerticalAlignment="Stretch" IsItemClickEnabled="True" Visibility="{Binding IsAnnotationsListOpen, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ItemContainerStyle="{StaticResource AnnotationsListViewItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding}" />
<TextBlock Text="{Binding DisplayTitle}" Margin="20,0,0,10" FontSize="12" TextWrapping="WrapWholeWords" Visibility="Visible" />
</StackPanel>
<CommandBar Grid.Column="1">
<CommandBar.SecondaryCommands>
<AppBarElementContainer>
<StackPanel Orientation="Horizontal">
<Button x:Name="btn_RemoveFromList" DataContext="{Binding}">
<Button.Content>
<SymbolIcon Symbol="Delete" />
</Button.Content>
<ToolTipService.ToolTip>
<ToolTip Content="Delete" Placement="Mouse" />
</ToolTipService.ToolTip>
</Button>
</StackPanel>
</AppBarElementContainer>
</CommandBar.SecondaryCommands>
</CommandBar>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle >
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border AutomationProperties.Name="{Binding Key}">
<TextBlock Text="{Binding Key}" Style="{ThemeResource TitleTextBlockStyle}"/>
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
....
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:Renderer" BasedOn="{StaticResource RendererDefaultStyle}"/>
</ResourceDictionary>
I tried to bind a click event to the button like this but since it is dynamically generated it doesn't work.
public sealed class Renderer: Control, IDisposable
{
....
private void UpdateAnnotationsListView()
{
(GetTemplateChild("AnnotsList") as ListView).ItemsSource = null;
var source = AnnotationAdapter.GetGroupedAnnotations(); // ObservableCollection<ListViewGroupInfo>
var viewSource = new CollectionViewSource
{
IsSourceGrouped = true, Source = source
};
(GetTemplateChild("AnnotsList") as ListView).ItemsSource = viewSource.View;
if (viewSource.View.Count > 0)
{
(GetTemplateChild("btn_RemoveFromList") as Button).Click -= null;
(GetTemplateChild("btn_RemoveFromList") as Button).Click += async delegate(object sender, RoutedEventArgs e)
{
await OpenRemoveConfirmationAsync();
};
}
}
....
}
List source is a ObservableCollection of type
public class ListViewGroupInfo: List < object >
{
public ListViewGroupInfo() {}
public ListViewGroupInfo(IEnumerable < object > items): base(items) {}
public object Key
{
get;
set;
}
}
List source is structured in such a way where I can group the list items accordingly.
This is a sample of the rendered ListView for more context.
The Delete buttons are the ones I'm trying to work with here.
I want to bind a method to the click event of those buttons in the ListView.
I Cannot use the name attribute since there can be multiple buttons as the list grows.
Since this button is in a templated control & generated in the runtime, I couldn't find a way to bind a method to the click event.
My guess is that I will have to bind a command to the button. But I couldn't find a way to do that either.
I did not use MVVM pattern in the templated control.
Could anyone help me with this? Any help is much appreciated.
My guess is that I will have to bind a command to the button. But I couldn't find a way to do that either.
The better way is using command to approach, I will share the detail steps below that you could refer to. please note you need to set current page datacontext as this this.DataContext = this;. it could make sure you can access command where in the code behind from DataTemplate.
Xaml Code
<Grid>
<ListView x:Name="MyListView" ItemsSource="{x:Bind Items}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Header}" />
<TextBlock
Margin="20,0,0,10"
FontSize="12"
Text="{Binding DisplayTitle}"
TextWrapping="WrapWholeWords"
Visibility="Visible" />
</StackPanel>
<CommandBar Grid.Column="1">
<CommandBar.SecondaryCommands>
<AppBarElementContainer>
<StackPanel Orientation="Horizontal">
<Button
x:Name="btn_RemoveFromList"
Command="{Binding DataContext.DeleteCommand, ElementName=MyListView}"
CommandParameter="{Binding}">
<Button.Content>
<SymbolIcon Symbol="Delete" />
</Button.Content>
<ToolTipService.ToolTip>
<ToolTip Content="Delete" Placement="Mouse" />
</ToolTipService.ToolTip>
</Button>
</StackPanel>
</AppBarElementContainer>
</CommandBar.SecondaryCommands>
</CommandBar>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Code behind
public sealed partial class ListPage : Page
{
public ListPage()
{
this.InitializeComponent();
this.DataContext = this;
}
private ObservableCollection<Model> Items { set; get; }
public ICommand DeleteCommand
{
get
{
return new CommadEventHandler<Model>((s) =>
{
Items.Remove(s);
});
}
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
MakeDataSource();
}
private void MakeDataSource()
{
Items = new ObservableCollection<Model>();
for (int i = 0; i < 10; i++)
{
Items.Add(new Model()
{
Header = $"header{i}",
DisplayTitle= $"DisplayTitle{i}"
});
}
}
}
public class Model
{
public string Header { get; set; }
public string DisplayTitle { get; set; }
}
class CommadEventHandler<T> : ICommand
{
public event EventHandler CanExecuteChanged;
public Action<T> action;
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
this.action((T)parameter);
}
public CommadEventHandler(Action<T> action)
{
this.action = action;
}
}
After a whole bunch of research & trial and error, I ended up with a different approach as #nico-zhu-msft suggested.
Basically, I moved the ListView to a separate user control & observed property changes from the parent template control. In order to bind data to the ListView used a view-model.
AssnotationsList.xaml
<UserControl
x:Class="PDF.Renderer.AnnotationsList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PDF.Renderer"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewmodels="using:PDF.Renderer.ViewModels"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.DataContext>
<viewmodels:AnnotationsListViewModel />
</UserControl.DataContext>
<UserControl.Resources>
<Style x:Key="AnnotationsListViewItemStyle" TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</UserControl.Resources>
<ListView SelectionMode="None" VerticalAlignment="Stretch" IsItemClickEnabled="True" ItemContainerStyle="{StaticResource AnnotationsListViewItemStyle}" ItemsSource="{Binding AnnotationsList}" ItemClick="AnnotationListViewItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding}" />
<TextBlock Text="{Binding DisplayTitle}" Margin="20,0,0,10" FontSize="12" TextWrapping="WrapWholeWords" Visibility="Visible" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle >
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border AutomationProperties.Name="{Binding Key}">
<TextBlock Text="{Binding Key}" Style="{ThemeResource TitleTextBlockStyle}"/>
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</UserControl>
AnnotationsList.xaml.cs
public sealed partial class AnnotationsList : UserControl, INotifyPropertyChanged
{
public AnnotationsList()
{
this.InitializeComponent();
}
private BaseAnnotation selectedAnnotation = null;
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}
public ICollectionView AnnotationsListSource
{
get { return (ICollectionView)GetValue(AnnotationsListSourceProperty); }
set { SetValue(AnnotationsListSourceProperty, value); }
}
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty AnnotationsListSourceProperty =
DependencyProperty.Register(nameof(AnnotationsListSourceProperty), typeof(ICollectionView), typeof(AnnotationsList), new PropertyMetadata(null, new PropertyChangedCallback(OnAnnotationsListSourceChanged)));
private static void OnAnnotationsListSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (object.Equals(e.NewValue, e.OldValue) || e.NewValue is null)
return;
d.RegisterPropertyChangedCallback(AnnotationsListSourceProperty, CaptureAnnotationListSource);
}
private static void CaptureAnnotationListSource(DependencyObject sender, DependencyProperty dp) => (sender as AnnotationsList).SetAnnotationsListSource(sender.GetValue(dp) as ICollectionView);
private void SetAnnotationsListSource(ICollectionView annotationsCollection) => (this.DataContext as AnnotationsListViewModel).AnnotationsList = annotationsCollection;
public BaseAnnotation SelectedAnnotation
{
get { return selectedAnnotation; }
set { if (value != selectedAnnotation && value != null) { selectedAnnotation = value; OnPropertyChanged(nameof(SelectedAnnotation)); }; }
}
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty SelectedAnnotationProperty =
DependencyProperty.Register(nameof(SelectedAnnotationProperty), typeof(BaseAnnotation), typeof(AnnotationsList), new PropertyMetadata(null));
private void AnnotationListViewItemClick(object sender, ItemClickEventArgs e) => SelectedAnnotation = e.ClickedItem as BaseAnnotation;
}
AnnotationsListViewModel.cs
class AnnotationsListViewModel : ViewModalBase
{
private ICollectionView annotationsList = null;
public ICollectionView AnnotationsList
{
get { return annotationsList; }
set { if(value != annotationsList) { annotationsList = value; OnPropertyChanged(nameof(AnnotationsList)); } }
}
}
Replaced the ListView with the user control Renderer.cs like this.
<local:AnnotationsList x:Name="ctrl_AnnotationsList" Margin="0,12,0,0" Grid.Row="1" VerticalAlignment="Stretch" Visibility="{Binding IsAnnotationsListOpen, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
In the parent control class Renderer.cs (template control) got a reference to the AnnotationsList control like this when parent is first rendered & bound the PropertyChanged event.
AnnotationsList = GetTemplateChild("ctrl_AnnotationsList") as AnnotationsList;
AnnotationsList.PropertyChanged -= null;
AnnotationsList.PropertyChanged += OnAnnotationsListPropertyChanged;
Added the following code to trigger on property changes in the AnnotationsList control.
private void OnAnnotationsListPropertyChanged(object sender, PropertyChangedEventArgs e)
{
switch(e.PropertyName)
{
case "SelectedAnnotation":
var annotation = (sender as AnnotationsList).SelectedAnnotation;
if (annotation != null)
GoToAnnotation(annotation).GetAwaiter();
break;
default:
break;
}
}
For now it is configured to trigger on ItemClick event of the ListViewItems.
Hope this helps someone who might be looking for a similar solution.

Why is Unfocused event triggered while typing on an Entry?

In my Xamarin Forms application I would like to perform a validation on an Entry element when the user focus it out. Using Completed event only works when the user taps "enter" on the keyboard. I tried to use Unfocused but this event triggers while the user is typing on the Entry element and I really do not understand why.
How could I perform a piece of code only when an Entry element is unfocused?
I've 10 ViewCell elements like this one:
<ViewCell >
<StackLayout Orientation="Horizontal" Padding="13, 5" >
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" Spacing="1">
<Label Text="Matricola" VerticalOptions="Center" HorizontalOptions="StartAndExpand" ></Label>
<Entry x:Name="matricola" Text="{Binding Paziente.MatricolaPaziente, Mode=TwoWay}" HorizontalOptions="FillAndExpand" Completed="Entry_Completed" Unfocused="Entry_Completed" ></Entry>
<Label Text="{Binding RegistrationValidator.MatricolaError, Mode=OneWay}" HorizontalOptions="FillAndExpand" TextColor="IndianRed"></Label>
</StackLayout>
</StackLayout>
</ViewCell>
Code behind:
private async void Entry_Completed(object sender, EventArgs e){
// Some code here
}
Moreover the event triggers with unexpected random senders (other Entry elements, always with e.IsFocused == false)
The Entry focus issue inside ListView seems to occur (on second row of the ListView and onwards) on Android (8.1 and 9.0) (Xamarin.Forms 4.5.0.356).
See also "Entry focus issue inside ListView".
As a workaround, use CollectionView (without ViewCell in ItemTemplate).
Sample without Entry focus issue:
<CollectionView>
<CollectionView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>First</x:String>
<x:String>Second</x:String>
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemTemplate>
<DataTemplate>
<Entry Text="collectionview" Focused="Entry_Unfocused" Unfocused="Entry_Unfocused" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Sample with Entry focus issue in ListView on Android (8.1 and 9.0):
<ListView>
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>First</x:String>
<x:String>Second</x:String>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Entry Text="listview" Focused="Entry_Unfocused" Unfocused="Entry_Unfocused" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Codebehind for observing the focus events:
void Entry_Unfocused(object sender, FocusEventArgs e)
{
Debug.WriteLine($"Entry_Unfocused:{e.IsFocused}:");
}
void Entry_Focused(object sender, FocusEventArgs e)
{
Debug.WriteLine($"Entry_Focused:{e.IsFocused}:");
}
I tried with a sample forms like this
<ContentPage.Content>
<StackLayout Spacing="20" Padding="15">
<Label Text="Text" FontSize="Medium" />
<Entry Text="{Binding Item.Text}" d:Text="Item name" FontSize="Small" Unfocused="Entry_Unfocused" Completed="Entry_Completed" />
<Label Text="Description" FontSize="Medium" />
<Editor Text="{Binding Item.Description}" d:Text="Item description" FontSize="Small" Margin="0" />
</StackLayout>
</ContentPage.Content>
And in the code behind:
private void Entry_Unfocused(object sender, FocusEventArgs e)
{
var txt = ((Entry)sender).Text;
DisplayAlert("Info", $"Value of text after entry lost focus : {txt} ", "OK");
}
private void Entry_Completed(object sender, EventArgs e)
{
var txt = ((Entry)sender).Text;
DisplayAlert("Info", $"Value when Enter Key is tapped : {txt} ", "OK");
}
Everything works fine! While looking into your code again, it seems your are in listview. Maybe the problem might come from there.
I believe the Unfocused event gets triggered regardless of focus or unfocus, but the FocusEventArgs on the event should have a bool called IsFocused which should show whether or not the Entry is still focused. Have you tried checking that? It looks like you Unfocused Event Handler just uses a generic EventArgs when it could be using the more specific FocusEventArgs
Unfocused event is raised whenever the Entry loses focus. I make a simple code to test and verify.
Xaml:
<ListView ItemsSource="{Binding list}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Entry Text="{Binding Name}" Unfocused="Entry_Unfocused" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Code:
public partial class EntryPage : ContentPage
{
public ObservableCollection<Person> list { get; set; }
public EntryPage()
{
InitializeComponent();
list = new ObservableCollection<Person>()
{
new Person (){ Name="A"},
new Person (){ Name="B"}
};
this.BindingContext = this;
}
private void Entry_Unfocused(object sender, FocusEventArgs e)
{
}
}
public class Person
{
public string Name { get; set; }
}

UWP set ImageSource from SplitView

I have a litte SplitView app an now I will set the ImageSource on page2 from mySplitpanel.
How can I get access to all paramaters like SetSource or Visible?
Here is my code
Mainpage.xaml
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Width="938.137">
<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="150">
<SplitView.Pane>
<StackPanel Background="Gray">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="MenuButton1_Click"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="MenuButton2_Click"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="MenuButton3_Click"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<Frame x:Name="myFrame" />
</SplitView>
</Page>
Mainpage.xaml.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace App1
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
myFrame.Navigate(typeof(Page1));
}
private void MenuButton1_Click(object sender, RoutedEventArgs e)
{
myFrame.Navigate(typeof(Page2));
}
private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}
private void MenuButton2_Click(object sender, RoutedEventArgs e)
{
myFrame.Navigate(typeof(Page1)); //Home
}
private void MenuButton3_Click(object sender, RoutedEventArgs e)
{
//set image source at page2.myImagePage2
// ??
}
}
}
Page2.xaml
<Page
x:Class="App1.Page2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="#FFE03535">
<Image x:Name="myImagePage2" HorizontalAlignment="Left" Height="116" Margin="81,112,0,0" VerticalAlignment="Top" Width="175" Source="Assets/LockScreenLogo.png"/>
</Grid>
</Page>
I want to change the ImageSource at Page2.myImagePage2 from MenuButton3_Click
How can I access a function inside page2?
The function sets the Visibilty of items on Page2.
Can I access the function and the items get invisible?
You can use the code-behind of Page2 (Page2.xaml.cs) to create a public method that will modify the visibility (like public void HideImage() or public void ChangeImageSource()).
Now to get hold of the current page within the Click handler, use the Frame.Content property:
private void MenuButton3_Click(object sender, RoutedEventArgs e)
{
var page = myFrame.Content as Page2;
if ( page != null )
{
//do something like calling your custom public method
//page.HideImage();
}
}

WinRT Binding data of ViewMode inside a DataTemplate

I wanted to bind data inside a DataTemplate that is stored in ViewModel. I've tried several ways but did not succeed and the solutions for WPF doesn't seems to work on WinRT like AncestorType Property of RelativeSource.
<Page.DataContext>
<local:ViewModel x:Name="ViewModel" />
</Page.DataContext>
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind ViewModel.names}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:mydatatype">
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<!--Here I want a TextBlock to show the number-->
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
Here is the ViewModel
public class ViewModel
{
public int Number = 42;
public List<mydatatype> names = new List<mydatatype>();
public ViewModel()
{
names.Add(new mydatatype("name1"));
names.Add(new mydatatype("name2"));
}
}
public class mydatatype
{
public string Name { get; set; }
public mydatatype(string name)
{
this.Name = name;
}
}
You can access the DataTemplate of other objects by giving them a name and then referencing this. Using this technique you should be able to access its DataContext to bind to the viewmodel directly, even from within a DataTemplate
<Page x:Name="PageRoot">
<Page.DataContext>
<local:ViewModel x:Name="ViewModel" />
</Page.DataContext>
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="MainPanel">
<ListView ItemsSource="{x:Bind ViewModel.names}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:mydatatype">
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding DataContext.Name, ElementName=PageRoot}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Page>

binding files to longlistselector

Trying to learn Win Phone 8, following along an online tutorial. In the tutorial, the guy uses the ListBox to show files, which is working fine for me.
However, I thought we're supposed to use LongListSelector, so I added that; but nothing shows up.
If I put the LongListSelector first in the markup, neither displays when I run the app in the emulator, so I think I'm getting an exception from binding the LongListSelector. I don't understand why though.
It's pretty simple, click a button and read files in a directory, displaying them back.
<StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" >
<Button Content="Show files" Click="Button_Click_1"/>
<ListBox x:Name="lb">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" />
<Image x:Name="img" Source="{Binding Path}" Width="100" Height="100"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<phone:LongListSelector HorizontalAlignment="Left"
x:Name="llsFiles"
ItemTemplate="{StaticResource FilesDataTemplate}"
/>
</StackPanel>
and the LLS template:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="FilesDataTemplate">
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
then the code-behind:
private void Button_Click_1(object sender, RoutedEventArgs e)
{
GetPackageFiles();
}
private async Task GetPackageFiles()
{
//Get the folder where the app is installed on the phone.
var installFolder = Package.Current.InstalledLocation;
var imagesFolder = await installFolder.GetFolderAsync("Images");
var fileList = await imagesFolder.GetFilesAsync();
lb.ItemsSource = fileList;
llsFiles.ItemsSource = fileList.ToList();
}
Try this
//add this declaration
List<FirstList> source = new List<FirstList>();
public class FirstList
{
[DataMember]
public string cItem { get; set; }
public FirstList(string item)
{
this.cItem = item;
}
}
Then to add anything you would just do this.
source.Add(new FirstList(fileList.ToString());
make you sure you have the binding for it