|
Hey all,
I'm new to WPF/Silverlight, which I've noticed is of the sweet goodness.
In a project, I'd like to add a listbox/grid type control that's similar to the Contacts app on the iPhone, as seen in this screenshot[].
ie: it has an A-Z type thing on the side , which when clicked, takes you to the group of items starting w/ that letter.
The goal is to display a potentially "large" # of items in it but still make it easy to find the one you're looking for.
Maybe at the top, it'd have a textbox for autocompletion while typing, and/or a search button, similar to what you get in Blend for searching properties in the Property editor window.
Does anyone know what I mean? I'd be interested in any free or paid 3rd party control which has this or parts of this,so if you know of any, let me know.
If I should roll my own, could you describe the basic layout items? Would it just be a datagrid/dataview type control using a grouping feature, & scrollviewer & a few snippets to move it to items based on clicks, etc?
Any help is appreciated!
|
|
|
|
|
Hmm... two ways I can think of off the top of my head:
1) ListView in the GridView view mode with groups enabled. Then you'd style the items and style the group headers to look like your screen shot.
2) TreeView with the collapse / expand functionality disabled... first level would be A - Z, second level would be the items. Style the first level one way and the 2nd level the other way. Should be easy to disable the collapsing / expanding.
In either case, the A - Z overlay could be done a ton of ways too... vertical stackpanel with TextBlocks (or hyperlinks)... single selection listbox, etc.
No real personal preference between #1 and #2... they both sound like about the same amount of work.
Or you could just use a single listbox and manage inserting and deleting the header items.
|
|
|
|
|
I do not get the datagrid populated with data.
I see in e.result that 10 records are returned.
Can you see why i do not get the datagrid populated please?
Thanks
<Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid Name="gridDetailedMonitor" Margin="5" AutoGenerateColumns="False">
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="Key ID" Binding="{Binding KeyID}"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="Key Name" Binding="{Binding KeyName}"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="myDateTime" Binding="{Binding myDateTime}"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="my22DateTime" Binding="{Binding my22DateTime}"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="some data" Binding="{Binding somedata}"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="somemore field" Binding="{Binding somemorefield}"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="fieldlast" Binding="{Binding fieldlast}"></data:DataGridTextColumn>
</data:DataGrid.Columns>
</data:DataGrid>
</Grid>
|
|
|
|
|
You need to set the ItemSource of the datagrid to a collection (preferably ObservableCollection) of objects returned from the service.
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
Visit the Hindi forum here.
|
|
|
|
|
|
arkiboys wrote: solved. thank you
You are welcome.
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
Visit the Hindi forum here.
|
|
|
|
|
I have an ObservableCollection of type T - the collection is bound through the ItemsSource to a listbox which shows checkboxes for each item in the collection - the IsChecked property of each checkbox is bound to a bool in type T. How can I do data validation on the ListBox so there is a red border on the listbox if none of the checkboxes are checked and no red border if any of the checkboxes are checked
|
|
|
|
|
I'd use a data trigger for this and draw the border based on the underlying checked property (assuming you are two-way binding to the individual item).
|
|
|
|
|
Is there no way I can do it through data validation? If I have to have all sorts of different techniques depending on the control I would rather just not bother with the built in validation mechanisms.
|
|
|
|
|
RugbyLeague wrote: Is there no way I can do it through data validation?
What validation? Seriously, setting this up is fairly straight forward. Here's a demo of a simple checkbox with a red border that is displayed when the check box (or the value behind it) is checked.
<CheckBox x:Name="chkItem" Margin="5" Content="Check me" IsChecked="{Binding Checked, Converter={StaticResource boolToVis}}, Mode=TwoWay"/>
<Border Margin="3" Background="Red" CornerRadius="5" Padding="5">
<Border.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=chkItem, Path=IsChecked}" Value="False">
<Setter Property="Border.Visibility" Value="Hidden"/>
<Setter Property="Border.Visibility" Value="Hidden"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>Where Checked returns a boolean value, and is converted using a converter.
|
|
|
|
|
I am probably not explaining myself very well. I don't want red borders around the checkboxes, I want a red border around the listbox hosting them,
|
|
|
|
|
Ah - sorry about that. The principal would be similar, but you could just show the border if the validation results were not empty.
|
|
|
|
|
I am not sure what you mean. The problem is the validation is done on the binding and the ListBox binds through ItemsSource to an ObservableCollection - the collection never changes - the underlying objects but they don't get involved with the IDataErrorInfo on the class hosting ObservableCollection - if that makes sense.
|
|
|
|
|
Can't you have a property in your Collection, say "bool AreAnyChecked" and validate against that being true?
___________________________________________
.\\axxx
(That's an 'M')
|
|
|
|
|
Sorry, I should have got back to you yesterday. The simplest way of doing this is have a property in the main VM that holds the collection that returns whether or not any are checked, and then use a combination of a lambda check and a property notification to update this. Basically, what you do here is catch the property changed notification from the items in the observable collection and if it's the checked property, you do a quick select count where the checked is true. If the count is greater than zero, you display the border.
|
|
|
|
|
I am not entirely sure what you mean. I think I have been looking at this for too long and nothing makes sense anymore.
|
|
|
|
|
I'll see about knocking up a blog post later on for you that demonstrates this.
|
|
|
|
|
Rather more than I was hoping for but it would be much appreciated. As I said, I have spent that long looking at this now that nothing seems to make much sense.
|
|
|
|
|
I haven't had a chance to knock a blog post together on this, but if you'd like to send me your email address (via the email link here) I'll send you a working sample.
|
|
|
|
|
Other than what Pete suggested, another method is to create your own Collection which inherits from ObservableCollection, and put a Property on that that you bind to for data validatation, then you set the DataContext of your ListBox to the collection, bind right to it for ItemsSource, and bind to your custom boolean for the datavalidation part
|
|
|
|
|
What do I bind to the custom boolean?
|
|
|
|
|
Hi,
I am using silverlight 4 in vs 2010
I have created a solution with the following projects.
Web project to host the silverlight app
Silverlight project with silverlight pages.
wcf project.
All compiles.
I have added the wcf as service references to the silverlight application.
There is a clientaccesspolicy.xml folder inside the wcf project
Do you see why the following error occurs please?
Thanks
The error I get is:
CommunicationException was unhandled by user code
The remote server returned an error: NotFound.
This is the code in the silverlight page:
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
myService.myClient client = new myService.myClient();
client.GetAllDataCompleted += new EventHandler<myService.GetAllDataCompletedEventArgs>(client_GetAlldataCompleted);
client.GetAlldataAsync();
}
private void client_GetAllDataCompleted(object sender, myService.GetAllDataCompletedEventArgs e)
{
grid.DataContext = e.Result;
}
|
|
|
|
|
Have you got the service URL correctly confugured?
Check the config file.
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
Visit the Hindi forum here.
|
|
|
|
|
Which config file do you mean?
web.config in the WCF ?
How do I know it is properly configured?
Thanks
|
|
|
|
|
No the config file on the client side - serviceclient.config.
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
Visit the Hindi forum here.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
