|
Hello all,
I want to create a ComboBox UI which will look like below: http://dl.dropbox.com/u/7919724/ComboBox_Shapes.png[^]
I have added 3 different shapes of the ComboBox which may look as it is, based on the width of the content.
The first combo item has a bigger width, the second one has the same width as the combo, whereas the third one has smaller width than the combo. Is it possible to create the same shapes? I tried to do some tricks in the template, but as the drop down is inside the popup, I am quite unsure about this. Any idea???
Note that, there will not be any line between the toggle button and the drop down (as shown in the figure).
Waiting for your replies. Thanks in advance.
|
|
|
|
|
Looks like it is probably possible. My first guess is that the edit portion would have a border with thickness 3,3,3,0 or whatever thickness you choose, just have 0 on the bottom to get rid of the bottom border. For the pop up portion, you would need 3,3,3,3 for the thickness and clip the top border to the proper width. Or place a 2nd "white" rectangle over the border and set its width to the width of the combobox to hide the border.
Truth be told, eliminate the 3rd option and your life will be much easier. I don't think I've ever seen a combobox like that anyway. Usually the min width of the drop down is the width of the combobox.
|
|
|
|
|
I will check this and let you know by this weekend. Thanks.
|
|
|
|
|
This should be possible. Take a look at how they make the combo drop down oval shaped here[^].
The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it.
My latest tip/trick
|
|
|
|
|
Hi Abhinav,
Thanks for your response. Yes, the link you provided will give you a oval shaped. That is easy and I can do very easily. But my query is little different. See, the link you provided will produce the below combo box UI when resized: http://dl.dropbox.com/u/7919724/ComboBox_Shapes2.png[^]
Checkout my previous link, where I shown you three different kind of Combo Box UI.
|
|
|
|
|
You could consider using a Path object.
That will give you the shape - I'm just wondering how the combo drop down button would work.
The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it.
My latest tip/trick
|
|
|
|
|
That's the most funniest and challenging work buddy. If I use path, we need to resize and position it properly.
Generally it is easy using the border control but the problem comes when we have to remove the middle portion by dynamically getting the toggle button width. I tried to hide the border using another border control placed inside the popup, on top of the base border, but it didn't help me... 
I will try the solution that SledgeHammer posted. But quite unsure about the result.
|
|
|
|
|
Kunal_Chowdhury wrote: But quite unsure about the result.
Honestly, I would still be trying out the path.
I do think you have enough material for another article though.
The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it.
My latest tip/trick
|
|
|
|
|
Ha ha... Yes I have, but not getting time to write on them. I have a lot of topics suggested by my readers and they are all in queue. In this weekend I have to complete at least one of them. Thanks buddy for following my articles and blog.
|
|
|
|
|
You don't need to "dynamically" get the toggle button width. When you place the "white border" on top just bind its width to the toggle button width and WPF will do everything for you. Path will work too, but like you said, its a lot of hassle. My solution is a lot easier.
|
|
|
|
|
Hello SledgeHammer01,
I tried it once again but couldn't find it out. Can you please look into the source code and try to help me? The Source code is available here: http://dl.dropbox.com/u/7919724/ComboDemo.zip[^]. May be I am missing some silly thing...  Appreciate your help.
|
|
|
|
|
Hi, did you get a chance to look into the code? I am sure, I am missing something seriously.
|
|
|
|
|
My TreeView has an associated Item Template
I am trying to add a TreeViewItem tvi to a TreeView by code.
And I am bounding tvi to an instance of class Item
But the Item.Text is not reflected in TreeViewItem Text
What is the reason for this.
Here is the code
DataTemplate
<DataTemplate x:Key="TreeViewHeaderReadTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Text}" />
</StackPanel>
</DataTemplate>
TreeView
<sdk:TreeView Name="TreeView" ItemTemplate="{StaticResource TreeViewHeaderReadTemplate}">
</sdk:TreeView>
Class Item
public class Item
{
public Item(string text)
{
Text = text;
}
public string Text { get; set; }
}
Code to add TreeViewItem to TreeView
TreeViewItem tvi = new TreeViewItem();
Item item = new Item("Caption");
Tvi.DataContext = item;
TreeView.Items.Add(item);
I am not able to bind “caption” as the text for the treeviewitem.
The following code works for me
TreeView.Items.Add(new Item(“Caption”));
But I specifically need to add a TreeViewItem control and not a Item object
And I need this TreeViewItem to be bound to Item because I need that “Text” property bound.
What am I missing out here ?
|
|
|
|
|
The TreeView uses TreeViewItem(s). You need to add TreeViewItems to the TreeView.Items collection and you can add sub-items to a TreeViewItem.Items collection. To do what you want to do, you would need to set the Header to the Item and then set the template to properly bind.
One word of warning though. You are going to hate yourself in a few months for adding items by hand.
Use data bound collections and hierarchial templates instead.
|
|
|
|
|
The reason I am adding TreeViewItem manually is because I need the user to be able to add new child nodes to existing nodes through the UI.
I tried this
TreeViewItem tvi = new TreeViewItem();
tvi.Header = new Item("New Node");
TreeView.Items.Add(tvi);
And this header
<DataTemplate x:Key="TreeViewHeaderReadTemplate">
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding Text}"></TextBox>
</StackPanel>
</DataTemplate>
But what I get is a textblock with the caption = TestApplication.Item ( ie. Full class name of item )
What I am looking for is a textbox with the editable text "New Node".
|
|
|
|
|
If you use data binding, users can still add / delete new nodes. You just add / remove them from the data bound collection and the UI will auto-magically update.
I believe your other issue is that you are not specifying TargetType on the DataTemplate. If you are getting TestApplication.Item, its because the TreeViewItem is not picking up the template.
Also, your Item class is not implementing INotifyPropertyChanged, so none of your setters will work properly.
|
|
|
|
|
I think you're going about this the wrong way... Yes, you can work directly with the TreeView, but that's not how it's supposed to be used. The idea is to do everything via data-binding, so you never have to touch the TreeView or TreeViewItems at all.
Here's how I would go about this:
1) Add a "Children" property to your Item (Can call it whatever you want), typed as, say, an ObservableCollection<Item>. You may also want to create boolean properties such as "IsExpanded" and "IsSelected", which can be bound in the TreeView.ItemContainerStyle.
2) As another poster suggested, implement INotifyPropertyChanged on your Item class, and make sure you're raising the PropertyChanged event when the Text property changes.
3) Use a HierarchicalDataTemplate in your XAML... This is basically a DataTemplate that also has an ItemsSource property to include children... Something simple, like:
<HierarchicalDataTemplate DataType="{x:Type local:Item}" ItemsSource="{Binding Children}">
<TextBox Text="{Binding Text}"/>
</HierarchicalDataTemplate>
(You can expand on it later)
4) Set the ItemsSource property of your TreeView to the root node of your tree. It'll automatically generate the rest of the nodes as you modify your Item and its children.
Now, when you want to add another node under your root, just pop one into the Children collection, and the TreeView will detect this and update itself. Basically, you should never have to touch the TreeViewItems directly.
|
|
|
|
|
My datagrid is populated with data.
One of the columns in a checkbox
After population, I check or uncheck a nmber of rows in the datagrid.
Say in a click event i.e. update_click(), how can I loop through th edatagrid rows to see which rows are updated with the checks or unchecks?
In the update button click event I am trying to use this code:
List<ClassName> source = (List<ClassName>)grid.ItemsSource;
foreach (ClassName monitor in source)
{
}
But on th efirst line I get the error: unable to case object of type ...observablecollection to type ...list
Any thoughts please?
Thank you
Thanks
modified on Thursday, January 6, 2011 5:32 AM
|
|
|
|
|
It's already told you what the problem is. The backer for grid.ItemsSource is an ObservableCollection, and you're trying to cast it into a List. ObservableCollection does not derive from List, so you can't cast to it. What you could do, however, is cast it to IList instead, so you'd get:
IList<ClassName> source = (IList<ClassName>)grid.ItemsSource
|
|
|
|
|
Thanks for replying.
I remembered that once I read somewhere that I can use the observablecollection so I replaced the list with that.
And it works.
Thank you
|
|
|
|
|
Hi,
I have an object that is a collection of orders objects, each order object has a collection of OrderItems, each OrderItem has a collection of ItemDetail objects.
Im displaying all this data in 3 list boxes and the current selected value in any list box is displayed in a textbox.
I set the DataContext of my grid to the object. - All data is displayed as expected in WPF but when I try something similar in Silverlight it doesnt show any data beyond the parent...
Here is the xaml:
<ListBox Grid.Column="0" Name="lstOrders" DisplayMemberPath="OrderName" ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" />
<ListBox Grid.Column="1" Name="lstOrderItems" DisplayMemberPath="Product" ItemsSource="{Binding Path=OrderItems}" IsSynchronizedWithCurrentItem="True" />
<ListBox Grid.Column="2" Name="lstItemDetails" DisplayMemberPath="Details" ItemsSource="{Binding Path=OrderItems/ItemDetails}" IsSynchronizedWithCurrentItem="True" />
<TextBox Grid.Column="0" Grid.Row="1" x:Name="txtOrderName" Text="{Binding Path=OrderName}" />
<TextBox Grid.Column="1" Grid.Row="1" x:Name="txtProduct" Text="{Binding Path=OrderItems/Product}" />
<TextBox Grid.Column="2" Grid.Row="1" x:Name="txtDetail" Text="{Binding Path=OrderItems/ItemDetails/Details}" />
Any ideas what the Bindings should be for this to work in Silverlight?
|
|
|
|
|
Chazzysb wrote: OrderItems/ItemDetails/Details
Try Path=OrderItems.ItemDetails.Details
Use . instead of /.
The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it.
My latest tip/trick
|
|
|
|
|
Hi,
I tried setting the datacontext to the control, the grid, from another class property using the mvvm model and countless variations of . & / still this refused to work in Silverlight.
If anyone has a working example id be interested in seeing it!
I managed to get it working however by doing it this way:
http://msdn.microsoft.com/en-us/library/cc645060(v=VS.95).aspx[^]
Thanks,
Chas
|
|
|
|
|
I want to create a theater management system in which I have to dynamically add the seats as present in the table of database. Imagine a theater where there are seats from Row A to J and seat number 1 to 10. I want to make sure that if the seat is booked, I have to show it Red, if its vacant, I have to show it in green and if its disabled, it must be grayed out. I also want to create the table for such layout in Silverlight... Any suggestions?
Always Keep Smiling.
Yours Pankaj Nikam
|
|
|
|
|
Homework - we've had this question at least twice before, and we don't do homework for people. It's not that we feel we're too good to do it, it's that you won't learn anything if we do it for you. Part of being a programmer is being able to anaylze the problem, establish requirements, create the design, and implement the solution by developing the code.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
