In table creation, listbox method doesnt suits to my project need as the table goes beyond phone view. Gridview suited exactly. But I dont know how to add rows at runtime.Could anyone help me please?
namespace myApp
{
public class Person
{
public string Id { get; set; }
public string Name { get; set; }
public Person(string dId, string dName)
{
this.Id = dId;
this.Name = Name;
}
}
}
This is my XAML code:
<Grid x:Name="LayoutRoot" Background="Transparent">
<gridView:GridView x:Name="GridView1" CellSpacing="1" RowSpacing="1" ItemsSource="{Binding}">
<gridView:GridView.Columns>
<gridView:GridViewTextColumn Header="ID" Binding="{Binding} />
<gridView:GridViewTextColumn Header="Name" Binding="{Binding}"/>
</gridView:GridView.Columns>
</gridView:GridView>
</Grid>
To create Statically, i have no problem that I created an viewmodel for person object(e.g personVM) and I created static resource(in XAML) to that object and bound with my gridview.
<phone:PhoneApplicationPage.Resources>
<local:PersonViewModel x:Key="PersonVM"/>
</phone:PhoneApplicationPage.Resources>
<gridView:GridView x:Name="GridView1" CellSpacing="1" RowSpacing="1" ItemsSource="{Binding Source={StaticResource PersonVM}, Path=Data}"
>
How to do this dynamically? (it can be done by *observablecollection??)*I cant do with datacontext.
GridView1.DataContext = new Person("S403","Arthos");
Its not working.How can I identify columns in code.Help me please.
Building a DataGrid Control for Silverlight for Windows Phone
http://www.silverlightshow.net/items/Building-a-DataGrid-Control-for-Silverlight-for-Windows-Phone-Part-1.aspx
This suits the way to create a dynamic table perfectly, The problem in using list box is if the contents goes beyind windows phone, its not easy then to create table using listbox. Then i cant find any way to find dynamically access the grid view.
This(link) grid control has lot of features that would help a newbie like me. Its totally intuitive.
Related
I am currently transferring my app from WinForms to WPF.
Since I'm new in WPF, I stucked at creating DataTemplates for my treeView items. The screenshot shows how my treeview looked in WinForms version, and I need to get close result in WPF.
(My WinForms treeview)
As you can see, my DataTemplate's logic should take into account these factors:
Node type / defines which icon and fields combination will be displayed for particular item (node). App has about 7-8 node types. Type stored in separate node's field.
Variable values / I need to replace with text if null, etc
Numeric variable values / e.g.: set gray color if zero, etc.
Other properties / e.g.: adding textblocks depending on boolean fields.
And so on...
All these factors result into huge amount of possible item params combinations.
Also I'm using DevComponents WPF DotNetBar AdvTree to divide item properties into columns. I presume I should create 'sub templates' for different field sets and compose from them the entire DataTemplate for each column.
I've learned about triggers, and have to say that implementing my logic with triggers will make my subtemplates huge anyway.
(Current state of my WPF treeview)
So here are my questions:
Are there any ways to dynamically compose complex templates with C# code (without creating raw XAML and loading it at runtime)?
Maybe I should use completely different way (instead of using DataTemplate)? In Winforms I just used OwnerDraw mode, so the task was MUCH easier than in WPF :(
And how to display nested properties inside template? e.g.: Item.Prop.Subprop1.Subprop2.Targetprop.
PS: English is not my first language, sorry for your eyes.
1) The answer is yes.
For exemple if you want to define a template in your window for a simple string
public MainWindow()
{
InitializeComponent();
DataTemplate template = new DataTemplate(typeof(string));
FrameworkElementFactory borderFactory = new FrameworkElementFactory(typeof(Border));
borderFactory.SetValue(Border.PaddingProperty, new Thickness(1));
borderFactory.SetValue(Border.BorderThicknessProperty, new Thickness(1));
borderFactory.SetValue(Border.BorderBrushProperty, Brushes.Red);
FrameworkElementFactory textFactory = new FrameworkElementFactory(typeof(TextBlock));
textFactory.SetBinding(TextBlock.TextProperty, new Binding
{
Mode = BindingMode.OneWay
});
borderFactory.AppendChild(textFactory);
template.VisualTree = borderFactory;
myControl.ContentTemplate = template;
}
And in the Window you just put something like
<ContentControl x:Name="myControl" Content="Test text" Margin="10"/>
Your content control will render the string surrounded by a red border.
But as you anc see it is really complex to define your templates in this way.
The only scenario where i could imagine this approache is for some kind of procedurally generated templates.
Another way is to generate a string for the template and then load it with XamlReader:
string xaml = "<Ellipse Name=\"EllipseAdded\" Width=\"300.5\" Height=\"200\"
Fill=\"Red\" xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"/>";
object ellipse = XamlReader.Load(xaml);
2) I don't really see the need to generate templates in code behind. For exemple for this kind of data structure:
public class User
{
public string Name { get; set; }
public User Friend { get; set; }
}
public class RootNode
{
public string Title { get; set; }
public User User { get; set; }
public List<Node> Nodes { get; set; }
}
public class Node
{
public string Title { get; set; }
public List<SubNode> SubNodes { get; set; }
}
public class SubNode
{
public string Title { get; set; }
}
You can define this type of template:
<Window
...
Title="MainWindow" Height="350" Width="525" >
<Window.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:RootNode}" ItemsSource="{Binding Nodes}">
<StackPanel x:Name="spContainer" Orientation="Horizontal">
<TextBlock Text="{Binding Title}"/>
<TextBlock Text="{Binding User.Friend.Friend.Name}"/>
</StackPanel>
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding User}" Value="{x:Null}">
<Setter TargetName="spContainer" Property="Background" Value="Yellow"/>
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Node}" ItemsSource="{Binding SubNodes}">
<TextBlock Text="{Binding Title}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:SubNode}" ItemsSource="{Binding Nodes}">
<TextBlock Text="{Binding Title}"/>
</HierarchicalDataTemplate>
</Window.Resources>
<Grid>
<TreeView ItemsSource="{Binding RootNodes}"/>
</Grid>
</Window>
As you can see you can define a template by data type, you can also use triggers to modify the behavior in specific cases, you could also use som binding converters...
3) You can bind to nested properties just like to normal ones :
<TextBlock Text="{Binding User.Friend.Friend.Name}"/>
However in some cases more than two level bindings could fail (fail to resolve or fail to update when property changes, ...)
in my .net4-0 C# application I have a grid of 8x5 buttons. Each of them should display an image and a single letter (the hotkey to press) over the image (top left corner). Because the images depend on my data, it must be dynamically. All Images have the same size (100x100 pixel). The Image should fill the button nicely.
How can i achieve this?
My thoughts so far is, every time I load my data and change the display images, I manually create a Stackpanel, with a Image and TextBlock on it. But this doesn't fit well together.
Use a ListBox and put your list of data into ListBox.ItemSource Then you can create your own DataTemplate do specify how you want to display your data in that ListBox
For Example you can specify that you want your ListBox to be displayed with a 8x5 Grid. This of course depends on if you know that you will always display your Grid with 8x5 cells.
For the specific that you want to have a button with a letter on top as you said I would go with this.
<!--Resource-->
<DataTemplate DataType={x:YourViewModel}>
<StackPanel>
<TextBlock Content="{binding SomeText}"/>
<Button>
<Button.Content>
<Image Source="{binding YourImageSource}" Width="100px" Height="100px"/>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
This is assuming that you're using MVVM which is highly recommended when working with WPF.
If you don't know what MVVM then start reading about it cause it will help your development in WPF to become so much better.
If my example is confusing, please provide feedback and I will make it more clearer.
EDIT Simple-MVVM Example
Let's say we want to display a Game with a title and picture
First we create the Model
public class Game
{
private string _title {get; set;}
private string _imagepath {get; set;} //We are not getting the image but the imagepath
Public string Title {get{return _title;} set{_title = value;}
Public string Imagepath set{_imagepath = value;}
}
Then we need a ViewModel. Normally the ViewModel doesn't create new data since the data should come from the Model (From maybe a Database), but for the sake of this example we create it in the ViewModel
public class GameViewModel
{
Public ObservableCollection<Game> Games {get; set;} //<--- This is where the View is binding to
public GameViewModel
{
ObservableCollection<Game> Games = new ObservableCollection<Game>(); //ObservableCollection is used to notify if we have added or removed or updated an item in the list.
Games.Add(new Game() {Title = "Warcraft 3", Image=//Where you have your images );
Games.Add(new Game() {Title = "Overwatch", Image=//Where you have your images );
this.Games = Games;
}
}
And now when to have our View to bind to this ViewModel in our XAML-code
<!--Basic xaml-->
<!--Resource-->
<DataTemplate DataType={x:Type local:Game}>
<StackPanel>
<TextBlock Content="{Binding Title}"/>
<Button>
<Button.Content>
<Image Source="{Binding Imagepath}" Width="100px" Height="100px"/>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
Then in our ListBox
<ListBox ItemSource="{Binding Games}"/>
To get this to work you need to set the Datacontext in the View. Often when you create a new WPF-project the the View is called MainWindow.xaml
Add the ViewModel to the datacontext like this
/*Normally you want to avoid doing anything in code-behind with MVVM
If you want to avoid that you have to look into DI and IoC But it is way
to much to do in this example*/
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new GameViewModel();
}
}
I am very new to WPF and testing some things that I would like to include in an application that I will be working on. I have a 2 row ListView (bound to a textbox) with the names Scott Guthrie and Jon Skeet in it. I am trying to select "Scott Guthrie" in the ListView and have it populate the TextBox. I want to be able to edit the text and tab off and have the ListView updated.
Edit:I removed the code since that really didn't add anything to the question.
Wow, that's really complicated what you've got there.
This can be accomplished in a very simple way. You need a model to represent the programmer, a view model to hold a list of programmers, and simple binding to take care of the rest.
The model:
public sealed class Programmer
{
public string Name { get; set; }
}
Its very simple. An object representing a programmer with a name. We must encapsulate the name within an object because strings are immutable in .NET. If you tried binding against a single string in a list of strings, changes wouldn't propagate.
The collection of programmers is kept in a ViewModel. In this case, I call it ViewModel, because I have no imagination. This view model contains everything that the view binds against. In this case, its the list of programmers.
public sealed class ViewModel
{
public ObservableCollection<Programmer> Programmers { get; private set; }
public ViewModel()
{
Programmers = new ObservableCollection<Programmer>();
}
}
The ViewModel is set as the DataContext of our view. The DataContext flows down the visual tree, and we can bind against it at any point.
public MainWindow()
{
var vm = new ViewModel();
vm.Programmers.Add(new Programmer { Name = "Jon Skeet" });
vm.Programmers.Add(new Programmer { Name = "Scott Guthrie" });
DataContext = vm;
InitializeComponent();
}
You can set the DataContext in any way you want; I'm doing it here for simplicity's sake.
In the UI, I simply bind the ListView against the list of Programmers in the ViewModel (the DataContext, unless otherwise stated, is the root of the binding path). I then bind the TextBox against the SelectedItem of the ListBox. You select a Programmer from the list, which then becomes the SelectedItem, which I can then change the Name of.
<Window
x:Class="Programmers.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:t="clr-namespace:Programmers"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBox
x:Name="list"
ItemsSource="{Binding Programmers}"
DisplayMemberPath="Name" />
<TextBox
Grid.Column="1"
VerticalAlignment="Top"
Text="{Binding SelectedItem.Name, ElementName=list}" />
</Grid>
</Window>
Simple, once you get the hang of it.
This works (except that you need to validate the textbox since you can enter any text.. a dropdown might be a better choice).
View:
<TabItem x:Name="RightTabPage" Header="RightModel" DataContext="{Binding Right}">
<StackPanel>
<TextBox Text="{Binding SelectedGuru}"/>
<ListView SelectedItem="{Binding SelectedGuru}" ItemsSource="{Binding Gurus}"/>
</StackPanel>
</TabItem>
ViewModel:
public class RightViewModel
{
public RightViewModel()
{
Gurus = new[] {"Scott Guthrie", "Jon Skeet"};
SelectedGuru = Gurus.First();
}
public string SelectedGuru { get; set; }
public IEnumerable<string> Gurus{ get; set; }
}
I am using Telerik RadGridView control. I want to add row in radGridView in runtime.
I use following code:
<telerikGrid:RadGridView x:Name="TopGrid" AutoGenerateColumns="False" >
<telerikGrid:RadGridView.Columns>
<telerikGrid:GridViewComboBoxColumn DataMemberBinding="{Binding FieldName}" Width="150" Header="Field Name"/>
<telerikGrid:GridViewComboBoxColumn DataMemberBinding="{Binding Operator}" ItemsSource="{Binding OperatorList, Source={StaticResource OperatorModel}}" Width="150" Header="Operator"/>
</telerikGrid:RadGridView.Columns>
</telerikGrid:RadGridView>
Can anyone help me?
Not sure what you're using as far as a datasource, but generally speaking you'd be binding the RadGridView to some ItemsSource, then the source for the combo box columns would come from there.
For example, with an entity:
public class SomeEntity
{
public string FieldName { get; set; }
public string Operator { get; set; }
}
Binding the RadGridView to the List would automatically generate rows for this, so adding a new entity to that list would generate a new row. More info on how you're binding/populating the grid would help me give a more specific answer. :)
I am stucked at the part where I have to bind a collection to a dynamic usercontrol. Scenario is something like this.
I have a dynamic control, having a expander , datagrid, combobox and textbox, where combox and textbox are inside datagrid. There are already two collections with them. One is binded with combobox and another is binded with datagrid. When the item is changes in combox its respective value is set to its respective textbox, and so on. and this pair of value is then set to the collection binded with datagrid. A user can add multiple items.
Now the main problem is that all these things are happening inside a user control which is added dynamically, that is on button click event. A user can add desired numbers of user controls to the form.
problem is coming in this situtaion. Say I have added 3 controls. Now in 1st one if i add a code to the collection then it gets reflected in the next two controls too, as they are binded with same collection.
So, I want to know is there anyway to regenrate/rename the same collection so that the above condition should not arise.
It's hard to answer your question without seeing the bigger picture, however I have a feeling you are going about this the wrong way. It appears that you are adding instances of your user control directly from code. Instead of doing that, you should create some kind of ItemsControl in your XAML, and in its ItemTemplate have your user control. Bind that ItemsControl to a collection in your view model, and only manipulate that collection.
You should not be referring to visual controls in your view model or code behind. Whenever you find yourself referencing visual elements directly from code, it should raise a warning flag in your mind "Hey! There's a better way than that!"...
Example:
The view model:
public class ViewModel
{
public ObservableCollection<MyDataObject> MyDataObjects { get; set; }
public ViewModel()
{
MyDataObjects = new ObservableCollection<MyDataObject>
{
new MyDataObject { Name="Name1", Value="Value1" },
new MyDataObject { Name="Name2", Value="Value2" }
};
}
}
public class MyDataObject
{
public string Name { get; set; }
public string Value { get; set; }
}
The window XAML fragment containing the list box and the data template:
<Window.Resources>
...
<DataTemplate x:Key="MyDataTemplate">
<local:MyUserControl/>
</DataTemplate>
</Window.Resources>
...
<ListBox ItemsSource="{Binding MyDataObjects}"
ItemTemplate="{StaticResource MyDataTemplate}"
HorizontalContentAlignment="Stretch"/>
The user control:
<UniformGrid Rows="1">
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Value}" HorizontalAlignment="Right"/>
</UniformGrid>