StackPanel with User Controls in another User Control in Xaml Windows Phone - c#

How Can I add child items to StackPanel in UserControl from C# code? Should I create something like DependencyProperty for it?
As it is easy to set Properties like Text for TextBlock in my UserControl, I have no idea how can I add items to StackPanel when using CodeBehind to do it dynamicaly.

StackPanel are only meant to be used for the most basic layout situations. It is far better using some kind of ListBox or ItemsControl depending on your requirements. You could add a collection DependencyProperty to your UserControl and do something like this:
In UserControl:
<ItemsControl ItemsSource="{Binding YourCollectionDependencyProperty, RelativeSource={
RelativeSource AncestorType={x:Type YourPrefix:YourUserControl}}}" ... />
Then you could data bind another collection property to the UserControl from outside the control:
Outside UserControl:
<YourPrefix:YourUserControl YourCollectionDependencyProperty="{Binding Items}" ... />
Then adding new items to be displayed in the UserControl is as simple as adding items to the Items collection:
Items.Add(someNewObject);
Please read the Data Binding Overview page on MSDN for further information on data binding.

Yes you can do something like this (this is just a sample):
TextBlock printTextBlock = new TextBlock();
printTextBlock.Text = "Hello, World!";
//MainStackPanel below is the name given to your control in xaml
MainStackPanel.Children.Add(printTextBlock);
Sources:
Programatically Adding Items to StackPanel

Related

WPF binding within binding in XAML

So I have a custom WPF UserControl called Row. It has a DependencyProperty called Index. The DataContext of Row is a class called ViewModel which contains an ObservableCollection.
Within the XAML of Row, if possible, I want to bind the text in a TextBox with whatever element is at Index inside said collection. So, something like this:
<TextBox Text="{Binding Elements[{Binding Index}]}" />
How can I access Index, which is in Row's codebehind, in Row's xaml if the DataContext of Row is something else?
I hope that I explained this clearly, thanks in advance for whatever help is provided.

How to gain access to the controls of other pages in a UserControl?

I created a UserControl I post a ListView as DataTemplate
<ListView.ItemTemplate>
<DataTemplate>
<local:Favorites/>
</DataTemplate>
</ListView.ItemTemplate>
UserControl I need to use the Text property of a TextBlock on the page of the ListView. How do I us access to that and other controls?
Example:
if (query.Count == 0)
{
NoPreferiti.Visibility = Visibility.Visible; //NO ACCESS
}
The only way that is possible is if you pass the "parent" controls to the UserControl as properties, either through code behind or through xaml.
An easy way can be adding a Loaded event to the UserControl in the parent page and in the event handler you assign the controls you want to change inside the UserControl as parameters of the UserControl.

Using a HierarchicalDataTemplate to create a TreeView with child nodes of different UI Controls

I am trying to create a TreeView that allows child nodes of types textBlock and comboBox. Here is a picture of what this would look like:
I believe that this is an issue that can be solved by using a HierarchicalDataTemplate because the xaml is the area of the code that I would specify what UI control I cam using. So far I have tried implementing a StackPanel with my HierarchicalDataTemplate like so:
<HierarchicalDataTemplate DataType="{x:Type data:DataModel}" ItemsSource="{Binding Children}">
<StackPanel>
<TextBlock Text="{Binding DisplayName}" />
<ComboBox ItemsSource="{Binding CommandCollection}" />
</StackPanel>
</HierarchicalDataTemplate>
But I do not achieve the correct solution with this because StackPanel is basically setting up each node so that they contain both a textBlock and a comboBox. This is a problem because each child node is either a textBlock or a comboBox, never both. How do I set up a HierarchicalDataTemplate that allows TreeView child nodes to be either textBlocks or comboBoxes? Please let me know if you would like more details on how my TreeView is implemented, or would like to see more code.
Some background references to this question can be found here, and here.
Usually it is a good idea to template different types of data with respective data templates. This can be achieved implicitly by placing the templates in the TreeView.Resources and using the DataTemplate.DataType property.
Here is an example: [Link]
The only thing that differs is that you would use a hierarchical template and bind the ItemsSource of the template respectively to a property containing child items.

WPF and MVVM: bind UserControl to XAML dynamically

seems like a trivial task: i am building a wpf application, using MVVM pattern. what i want is dynamically change part of a view, using different UserControls, dependent on user input.
let's say, i have got 2 UserControls, one with a button, and another with a label.
in main view i have a container for that. following XAML "works":
<GroupBox Header="container" >
<local:UserControlButton />
</GroupBox>
and a UserControl element with buttons pops up. if i change it to another one, it works too.
question is how to feed that groupbox dynamically. if i put something like that in my model view:
private UserControl _myControl;
public UserControl MyControl
{
get
{
return _myControl;
}
set
{
_myControl= value;
InvokePropertyChanged("MyControl");
}
}
and change my view XAML to something like:
<GroupBox Header="container" >
<ItemsControl ItemsSource="{Binding MyControl}" />
</GroupBox>
and feed it from command with usercontrol for button or for label: nothing happens, although "MyControl" variable is set and is "invoke property changed"..
Obviously there are many ways to skin this particular cat - but to answer the question of why it doesn't work you need to look into the ItemsSource property of ItemsControl on MSDN.
The items control is designed to show multiple items, provided through an IEnumerable passed to the ItemsSource property. You are passing a UserControl, so the binding will fail.
For your example, I would change the ItemsControl to a ContentControl and bind the content to your MyControl property. This should then work.
<GroupBox Header="container" >
<ContentControl Content="{Binding MyControl}" />
</GroupBox>
However, I would strongly recommend looking into other ways of doing this - having a control in your VM breaks MVVM to my mind. Depending on what you are doing look at data templates - #Sheridan's link in the comments provides an great description of a way to do it.
Couldn't post this as a comment so adding as answer..
Have a look at this:
Implementing an own "Factory" for reusing Views in WPF
It uses DataTemplates but doesn't require the DataTemplate section for each view. If you potentially have a lot of user controls/views you wish to display or you are reusing through multiple views or you are intending to actually dynamically generate a view (versus just loading an existing user control) then this might suite your needs.

How to virtualize data in simple stackpanel in Windows Phone application

I have created a list with ScrollViewer and stackpanel. I am adding user control to this stackpanel from codebehind.
I want to virtualize data that I can improve the performance of my application.
How can i achieve this?
I cann't use Listbox because I am adding user control as DataItems and each user control have a different width and height.. Please suggest how to implement that
Code:
XAML
<ScrollViewer>
<StackPanel x:Name="stckPnlComponentsLst" Visibility="{Binding IsBusy, Converter={StaticResource BooleanToVisibilityInvertedConverter}}" Orientation="Vertical">
</StackPanel>
</ScrollViewer>
C#
for (int count = 0; count < countItems; count++)
{
stckPnlComponentsLst.Children.Add(new ChannelNewsLstControl(ViewModel.ComponentData[count], false, false));
}
I don't see any case in which using a StackPanel inside a ScrollViewer is a good idea.
You should not do that.
There are 2 controls to do what you want, ListBox and ListView.
If you really want to stick with a stackpanel inside a ScrollViewer, just replace your StackPanel, by a VirtualizingStackPanel. But again, you should NOT be doing that.
Use a ListBox instead. Check the sample here. For example, define ListBox in a xaml
<ListBox x:Name="MyList">
and then in codebehind
var MyListData = new List<ChannelNewsLstControl>();
MyListData.Add(new ChannelNewsLstControl {name = "MyFirstChannelName});
MyList.ItemsSource=MyListData;
If you have really lots of items, i'd recommend to use Telerik's DataBoundListBox as it is much faster than a normal ListBox (at least, for wp7) and supports virtualization and async loading. Sample would be pretty the same, as component is inherited ListBox and adding own features mentioned before.
EDIT: final answer:
Try to put a grid inside of your ItemTemplate and set its RowDefinition.Height = "Auto". See some details here

Categories