I have placed a UserControl inside a ListView.
How do I get the control of this UserControl in the view.
If I place it inside a ListView, I am unable to access it in the view. I also do not wish to make any changes to the listView binding source.
Its name isn't accessible directly in the view.
I am able to access the events but not Properties(x:Name , Visibility etc..).
You can use VisualTreeHelper class to get your UserControl .
Get each ListViewItem by calling the ListView's ContainerFromItem or ContainerFromIndex.
Create a recursive function to find the DependencyObjects that are in each ListViewItem as a UserControl.
I made a simple to show how it works. You can refer to the following code.
MainPage.xaml
<Grid>
<ListView x:Name="MyListView" Margin="0,0,0,109">
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Grid>
<local:MyUserControl1></local:MyUserControl1>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Content="Button" Margin="682,943,0,0" VerticalAlignment="Top" Click="Button_Click"/>
</Grid>
MainPage.cs
public List<string> ItemsSourceList { get; set; }
public MainPage()
{
this.InitializeComponent();
ItemsSourceList = new List<string>();
ItemsSourceList.Add("1");
ItemsSourceList.Add("2");
ItemsSourceList.Add("3");
ItemsSourceList.Add("4");
ItemsSourceList.Add("5");
MyListView.ItemsSource = ItemsSourceList;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
foreach (var strItem in ItemsSourceList)
{
// get every listview item first
ListViewItem item = MyListView.ContainerFromItem(strItem) as ListViewItem;
// the DependencyObject is the UserControl that you want to get
DependencyObject myUserControl = FindChild(item);
}
}
public DependencyObject FindChild(DependencyObject parant)
{
int count = VisualTreeHelper.GetChildrenCount(parant);
for (int i = 0; i < count; i++)
{
var MyChild = VisualTreeHelper.GetChild(parant, i);
if (MyChild is MyUserControl1)
{
//Here can get the MyUserControl1.
MyUserControl1 myUserControl = (MyUserControl1)MyChild;
myUserControl.Foreground = new SolidColorBrush(Colors.Red);
return myUserControl;
}
else
{
var res = FindChild(MyChild);
return res;
}
}
return null;
}
I needed to use a Treeview in my xamarin forms application, however the only existing TreeView on the net are not free (Syncfusion and Telerik).
So I found this very interesting project : https://github.com/AdaptSolutions/Xamarin.Forms-TreeView
the only problem that I found is that the ItemSource and SelectedItem properties are not bindable and therefor I can't use it on an MVVM Pattern. Which brings us to my question, How can I make them bindable.
I tried to follow this documentation : https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/bindable-properties
but still nothing. Can anyone help me with that please ? Thank you
UPDATE :
this is the TreeView class :
public class TreeView : ScrollView
{
#region Fields
private readonly StackLayout _StackLayout = new StackLayout { Orientation = StackOrientation.Vertical };
//TODO: This initialises the list, but there is nothing listening to INotifyCollectionChanged so no nodes will get rendered
private IList<TreeViewNode> _RootNodes = new ObservableCollection<TreeViewNode>();
private TreeViewNode _SelectedItem;
#endregion
#region Public Properties
public TreeViewNode SelectedItem
{
get => _SelectedItem;
set
{
if (_SelectedItem == value)
{
return;
}
if (_SelectedItem != null)
{
_SelectedItem.IsSelected = false;
}
_SelectedItem = value;
SelectedItemChanged?.Invoke(this, new EventArgs());
}
}
public IList<TreeViewNode> RootNodes
{
get => _RootNodes;
set
{
_RootNodes = value;
if (value is INotifyCollectionChanged notifyCollectionChanged)
{
notifyCollectionChanged.CollectionChanged += (s, e) =>
{
RenderNodes(_RootNodes, _StackLayout, e, null);
};
}
RenderNodes(_RootNodes, _StackLayout, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset), null);
}
}
#endregion
#region Constructor
public TreeView()
{
Content = _StackLayout;
}
#endregion
#region Private Static Methods
private static void AddItems(IEnumerable<TreeViewNode> childTreeViewItems, StackLayout parent, TreeViewNode parentTreeViewItem)
{
foreach (var childTreeNode in childTreeViewItems)
{
if (!parent.Children.Contains(childTreeNode))
{
parent.Children.Add(childTreeNode);
}
childTreeNode.ParentTreeViewItem = parentTreeViewItem;
}
}
#endregion
#region Internal Static Methods
internal static void RenderNodes(IEnumerable<TreeViewNode> childTreeViewItems, StackLayout parent, NotifyCollectionChangedEventArgs e, TreeViewNode parentTreeViewItem)
{
if (e.Action != NotifyCollectionChangedAction.Add)
{
AddItems(childTreeViewItems, parent, parentTreeViewItem);
}
else
{
AddItems(e.NewItems.Cast<TreeViewNode>(), parent, parentTreeViewItem);
}
}
#endregion
}
so what Im trying to do here is making RootNodes bindable as well as SelectedItem afterwards.
What I did is simply adding this, thinking it should work but obviously it does not :
public static readonly BindableProperty RootNodesProperty =
BindableProperty.Create(nameof(RootNodes), typeof(IList<TreeViewNode>), typeof(TreeView));
public IList<TreeViewNode> RootNodes
{
get => (IList<TreeViewNode>)GetValue(RootNodesProperty);
set
{
SetValue(RootNodesProperty, value);
_RootNodes = value;
if (value is INotifyCollectionChanged notifyCollectionChanged)
{
notifyCollectionChanged.CollectionChanged += (s, e) =>
{
RenderNodes(_RootNodes, _StackLayout, e, null);
};
}
RenderNodes(_RootNodes, _StackLayout, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset), null);
}
}
UPDATE 2 :
Here is what it looks like
Hope this helps
It seems you will not need to create custom ItemSource and SelectedItem in ScrollView, because Xamarin Foms has Bindable Layouts that contains ItemsSource and ItemTemplateSelector .
Bindable layouts enable any layout class that derives from the Layout class to generate its content by binding to a collection of items, with the option to set the appearance of each item with a DataTemplate. Bindable layouts are provided by the BindableLayout class, which exposes the following attached properties:
ItemsSource – specifies the collection of IEnumerable items to be displayed by the layout.
ItemTemplate – specifies the DataTemplate to apply to each item in the collection of items displayed by the layout.
ItemTemplateSelector – specifies the DataTemplateSelector that will be used to choose a DataTemplate for an item at runtime.
If you need to use ScrollView, sample code as follows:
<ScrollView>
<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
Orientation="Horizontal"
...>
<BindableLayout.ItemTemplate>
<DataTemplate>
<controls:CircleImage Source="{Binding}"
Aspect="AspectFill"
WidthRequest="44"
HeightRequest="44"
... />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
I am using a renderer to allow me to set a custom footer in my TableView. The renderer works but I would like to have the capability to set up different footers for the different table sections. For example one footer for table section 0 and another for table section 1, all the way up to table section 5.
Here's the XAML that I am using:
<!-- <local:ExtFooterTableView x:Name="tableView" Intent="Settings" HasUnevenRows="True">-->
<TableView x:Name="tableView" Intent="Settings" HasUnevenRows="True">
<TableSection Title="Cards1">
<ViewCell Height="50">
<Label Text="Hello1" />
</ViewCell>
<ViewCell Height="50">
<Label Text="Hello2" />
</ViewCell>
</TableSection>
<TableSection Title="Cards2">
<TextCell Height="50" Text="Hello"></TextCell>
</TableSection>
</TableSection>
<!-- </local:ExtFooterTableView>-->
</TableView>
and here is the C# class and renderer:
public class ExtFooterTableView : TableView
{
public ExtFooterTableView()
{
}
}
and:
using System;
using Japanese;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(ExtFooterTableView), typeof(Japanese.iOS.ExtFooterTableViewRenderer))]
namespace Japanese.iOS
{
public class ExtFooterTableViewRenderer : TableViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<TableView> e)
{
base.OnElementChanged(e);
if (Control == null)
return;
var tableView = Control as UITableView;
var formsTableView = Element as TableView;
tableView.WeakDelegate = new CustomFooterTableViewModelRenderer(formsTableView);
}
private class CustomFooterTableViewModelRenderer : TableViewModelRenderer
{
public CustomFooterTableViewModelRenderer(TableView model) : base(model)
{
}
public override UIView GetViewForFooter(UITableView tableView, nint section)
{
Debug.WriteLine("xx");
if (section == 0)
{
return new UILabel()
{
// Text = TitleForFooter(tableView, section), // or use some other text here
Text = "abc",
TextAlignment = UITextAlignment.Left
// TextAlignment = NSTextAlignment.NSTextAlignmentJustified
};
}
else
{
return new UILabel()
{
// Text = TitleForFooter(tableView, section), // or use some other text here
Text = "def",
TextAlignment = UITextAlignment.Left
// TextAlignment = NSTextAlignment.NSTextAlignmentJustified
};
}
}
}
}
}
The code works but I would like to find out how I can set up a different footer text for different sections in the XAML. Something like this:
From what I see it looks like the code is partly there TitleForFooter(tableView, section) but I am not sure how to use it and how I could set it up. Note that I am not really looking for a view model solution. I would be happy to be simply able to specify the section footer text as part of the TableView XAML.
I'd appreciate if anyone could give me some advice on this.
First of all, in order to be able to specify the section footer text in XAML - simplest option would be to create a bindable property in TableSection. But as TableSection is sealed, we can't derive it to define our custom bindable properties.
So, the next option is to create a attached bindable property.
public class Ex
{
public static readonly BindableProperty FooterTextProperty =
BindableProperty.CreateAttached("FooterText", typeof(string), typeof(Ex), defaultValue: default(string));
public static string GetFooterText(BindableObject view)
{
return (string)view.GetValue(FooterTextProperty);
}
public static void SetFooterText(BindableObject view, string value)
{
view.SetValue(FooterTextProperty, value);
}
}
Next step would be to update renderer to retrieve this value for every section:
private class CustomFooterTableViewModelRenderer : TableViewModelRenderer
{
public CustomFooterTableViewModelRenderer(TableView model) : base(model)
{
}
public override UIView GetViewForFooter(UITableView tableView, nint section)
{
return new UILabel()
{
Text = TitleForFooter(tableView, section), // or use some other text here
Font = UIFont.SystemFontOfSize(14),
ShadowColor = Color.White.ToUIColor(),
ShadowOffset = new CoreGraphics.CGSize(0, 1),
TextColor = Color.DarkGray.ToUIColor(),
BackgroundColor = Color.Transparent.ToUIColor(),
Opaque = false,
TextAlignment = UITextAlignment.Center
};
}
//Retrieves the footer text for corresponding section through the attached property
public override string TitleForFooter(UITableView tableView, nint section)
{
var tblSection = View.Root[(int)section];
return Ex.GetFooterText(tblSection);
}
}
Sample Usage
<local:ExtFooterTableView x:Name="tableView" Intent="Settings" HasUnevenRows="True">
<TableSection Title="Cards1" local:Ex.FooterText="Sample description">
<ViewCell Height="50">
<Label Margin="20,0,20,0" Text="Hello1" />
</ViewCell>
<ViewCell Height="50">
<Label Margin="20,0,20,0" Text="Hello2" />
</ViewCell>
</TableSection>
<TableSection Title="Cards2" local:Ex.FooterText="Disclaimer note">
<TextCell Height="50" Text="Hello"></TextCell>
</TableSection>
</local:ExtFooterTableView>
It is very simple. you need to add the bindable property for pass value from XAML to CustomRenderer in CustomControl like this:
Customer TableView
public class ExtFooterTableView : TableView
{
public ExtFooterTableView()
{
}
}
Xaml control code
<local:ExtFooterTableView x:Name="tableView" Intent="Settings" HasUnevenRows="True">
Renderer class
using System;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using yournamespace;
using System.ComponentModel;
[assembly: ExportRenderer(typeof(ExtFooterTableView), typeof(FooterTableViewRenderer))]
namespace yournamespace
{
public class FooterTableViewRenderer : TableViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<TableView> e)
{
base.OnElementChanged(e);
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
var view = (ExtFooterTableView)Element;
if (e.PropertyName == ExtFooterTableView.IntentProperty.PropertyName)
{
string intent = view.Intent;
// Do your stuff for intent property
}
if (e.PropertyName == ExtFooterTableView.HasUnevenRowsProperty.PropertyName)
{
bool hasUnevenRows = view.HasUnevenRows;
// Do yout stuff for HasUnevenRow
}
}
}
}
I used a custom confirmation popup window, this the XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Content}" TextWrapping="Wrap" Width="150"/>
<StackPanel Orientation="Horizontal" Margin="6" Grid.Row="1">
<Button x:Name="YesBtn" Width="100" Content="OK" Click="OnOk_Click"/>
<Button x:Name="NoBtn" Width="100" Content="No" Click="OnNo_Click"/>
</StackPanel>
</Grid>
and this is the code behide:
public partial class CustomConfirmation : IInteractionRequestAware
{
public CustomConfirmation()
{
InitializeComponent();
}
public IConfirmation Confirmation
{
get { return this.DataContext as IConfirmation; }
set { this.DataContext = value; }
}
public string Title { get; set; }
public bool Confirmed { get; set; }
public INotification Notification { get; set; }
public Action FinishInteraction { get; set; }
private void OnOk_Click(object sender, RoutedEventArgs e)
{
if (FinishInteraction != null)
{
Confirmation.Confirmed= true;
FinishInteraction();
}
}
private void OnNo_Click(object sender, RoutedEventArgs e)
{
if (FinishInteraction != null)
{
Confirmation.Confirmed = false;
FinishInteraction();
}
}
}
In view model class i have :
two commands(DispalyLongTextCommand and DispalyShortTextCommand): one
to display long message and the other to display a short message
and i have InteractionRequest ConfirmationRequest
object initialized in ctor to raise intercations.
if I display the long message first my custom window resize its content to the hole message, it is OK!
but if a want to display the short message, my window keeps the previous size!
note : even i set the window SizeToContent style to WidthAndHeight but it not working.
<ei:Interaction.Triggers>
<prism:InteractionRequestTrigger SourceObject="{Binding ConfirmationRequest, Mode=TwoWay}">
<prism:PopupWindowAction IsModal="True" CenterOverAssociatedObject="True">
<prism:PopupWindowAction.WindowStyle>
<Style TargetType="Window">
<Setter Property="SizeToContent" Value="WidthAndHeight"/>
</Style>
</prism:PopupWindowAction.WindowStyle>
<prism:PopupWindowAction.WindowContent>
<local:CustomConfirmation/>
</prism:PopupWindowAction.WindowContent>
</prism:PopupWindowAction>
</prism:InteractionRequestTrigger>
</ei:Interaction.Triggers>
can you guide me,
thanks in advance
SOLUTION:
I fixed the problem by adding this code in the code behind of the custom popup window, :
public CustomConfirmationView()
{
InitializeComponent();
Loaded += CustomPopupView_Loaded;
}
private void CustomPopupView_Loaded(object sender, RoutedEventArgs e)
{
var parentWindow = this.Parent as Window;
if (parentWindow != null)
{
parentWindow.Measure(parentWindow.DesiredSize);
}
}
The WindowContent property is reused each time you show a new popup. So, what happens is that when you first show a popup, the CustomPopupView is visualized and the height is set based on the current content. Now, when you close the popup, and change the content to a larger message and then show it again, the CustomPopupView.Height has already been set by the previous action and isn't updated in time for the new Window to get the correct height. So you must now resize the Window to match the new size of the CustomPopupView height. So just add a little code to handle this in your code-behind like this:
public CustomPopupView()
{
InitializeComponent();
Loaded += CustomPopupView_Loaded;
}
private void CustomPopupView_Loaded(object sender, RoutedEventArgs e)
{
var parentWindow = this.Parent as Window;
if (parentWindow != null)
parentWindow.MinHeight = _txt.ActualHeight + 75;
}
Note: '_txt' is the name of the TextBlock with the Content binding.
I think this has to do with the default confirmation window that ships with Prism. The MinWidth and MinHeight are set in the XAML to 300 and 150, respectively. So, the window width/weight will never get any smaller no matter what the window content is. Overriding the window style will not be enough to do what you need.
You could download the Prism code and remove that limitation if you are comfortable enough with that. The source path to the file you would want to start with is below.
\Source\Wpf\Prism.Wpf\Interactivity\DefaultPopupWindows\DefaultConfirmationWindow.xaml
Either that, or ask the Prism team to see if they can make this more flexible, which is probably a better suggestion. You can post this as an issue on their GitHub page. https://github.com/PrismLibrary/Prism/issues
I was wondering if there was a color picker control for windows phone 8.1 runtime apps that look like this.
Thanks in advance!
My solution is make a ColorPicker class under Colorsource folder (or whatever you want to name it) which contain list of color data
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MyApps.Colorsource
{
class ColorPicker
{
public static List<ColorPicker> ColorData()
{
string[] colorNames =
{
"White","Black","Yellow","BananaYellow","LaserLemon","Jasmine","Green","Emerald",
"GreenYellow","Lime","Chartreuse","LimeGreen","SpringGreen","LightGreen",
"MediumSeaGreen","MediumSpringGreen","Olive","SeaGreen","Red","OrangeRed",
"DarkOrange","Orange","ImperialRed","Maroon","Brown","Chocolate",
"Coral","Crimson","DarkSalmon","DeepPink","Firebrick","HotPink",
"IndianRed","LightCoral","LightPink","LightSalmon","Magenta","MediumVioletRed",
"Orchid","PaleVioletRed","Salmon","SandyBrown","Navy","Indigo",
"MidnightBlue","Blue","Purple","BlueViolet","CornflowerBlue","Cyan",
"DarkCyan","DarkSlateBlue","DeepSkyBlue","DodgerBlue","LightBlue","LightSeaGreen",
"LightSkyBlue","LightSteelBlue","Mauve","MediumSlateBlue","RoyalBlue","SlateBlue",
"SlateGray","SteelBlue","Teal","Turquoise","DarkGrey","LightGray"
};
string[] uintColors =
{
"#FFFFFFFF","#FF000000","#FFFFFF00","#FFFFE135","#FFFFFF66","#FFF8DE7E", "#FF008000",#FF008A00","#FFADFF2F","#FF00FF00","#FF7FFF00","#FF32CD32",
"#FF00FF7F","#FF90EE90",
"#FF3CB371","#FF00FA9A","#FF808000","#FF2E8B57","#FFFF0000","#FFFF4500",
"#FFFF8C00","#FFFFA500","#FFED2939","#FF800000","#FFA52A2A","#FFD2691E",
"#FFFF7F50","#FFDC143C","#FFE9967A","#FFFF1493","#FFB22222","#FFFF69B4",
"#FFCD5C5C","#FFF08080","#FFFFB6C1","#FFFFA07A","#FFFF00FF","#FFC71585",
"#FFDA70D6","#FFDB7093","#FFFA8072","#FFF4A460","#FF000080","#FF4B0082",
"#FF191970","#FF0000FF","#FF800080","#FF8A2BE2","#FF6495ED","#FF00FFFF",
"#FF008B8B","#FF483D8B","#FF00BFFF","#FF1E90FF","#FFADD8E6","#FF20B2AA",
"#FF87CEFA","#FFB0C4DE","#FF76608A","#FF7B68EE","#FF4169E1","#FF6A5ACD",
"#FF708090","#FF4682B4","#FF008080","#FF40E0D0","#FFA9A9A9","#FFD3D3D3"
};
// i variable depends on how many color you want to add in my case i have 67 colors
var data = new List<ColorPicker>();
for (int i = 0; i < 68; i++) {
data.Add(new ColorPicker(colorNames[i], uintColors[i]));
}
return data;
}
public ColorPicker(string name, string color)
{
Name = name;
Coloruint = color;
}
public string Name { get; set; }
public string Coloruint { get; set; }
}
}
And then I create a GridView
<GridView x:Name="ColorGrid"
ItemsSource="{Binding}"
VerticalAlignment="Top"
Tapped="ColorGrid_Tapped">
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Ellipse Fill="{Binding Coloruint}"
Height="50"
Width="50"
Margin="10"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
OnNavigatedTo on that page add this code
var colorViewModel=ColorPicker.ColorData();
ColorGrid.DataContext = colorViewModel;
To use the color data on gridviewtapped add this code
private void ColorGrid_Tapped(object sender, TappedRoutedEventArgs e)
{
Ellipse senderObject = e.OriginalSource as Ellipse;
if (senderObject != null)
{
//senderObject.Fill;<< This is content color data
}
}
Hope this help :D
i got this idea from
http://spasol.wordpress.com/2013/06/02/custom-color-picker-for-windows-phone/
You can try a custom color picker - here's an article on Nokia Developer Wiki written by Spaso Lazarevic.
It comes down to using a predefined set of colors on a different page, nicely laid out.