Couldn't you just make them enlarge when you actually click to select them then?
Printable View
Couldn't you just make them enlarge when you actually click to select them then?
I'm already planning to show the selected day to the bottom right (underneath the small calendar), where it can be shown much larger, so that would be a bit redundant. I haven't figured out how to get that to work though. I remember from my early days that if you bind a Combobox to a list of elements the combobox actually displays those elements (I think i had a dropdown filled with calenders once by mistake :p), like a 'copy' of the element, but I can't get that to work by myself. I tried having a ContentControl with its Content bound to the SelectedDay property of the calendar, but it complains that the selected day is already a child of the calendar and i have to remove it from the calendar first... Oh well, I'll figure something out.
New project, an application that allows me to manage my scientific papers so that I can categorize them under various categories, authors, titles, journals, etc. The main grid (it's actually a UserControl with comboboxes and a ListBox) can filter on any column so that I can quickly find the paper I'm looking for.
http://www.nickthissen.nl/Images/Persistent/tmp7EE9.png
There's dialog windows for Authors, Journals and Categories, but I can also create them 'on the fly' when creating a new paper (so that I don't have to remember to create a new author first, I can do that all in the 'edit paper' window (not shown)).
http://www.nickthissen.nl/Images/Persistent/tmp551D.png
I've created the Windows 7 themes myself; I've got Windows 7 themed ListBoxes, ComboBoxes, TreeViews, ToolBars and Menus, all in an easy to re-use custom control library.
I'm not sure how these look in XP, but there's no aero transparency or things like that so it should look the same (it might clash with the horrible title bars in XP though).
It's quite early in development but I already love it, it's so easy to work with! What do you think?
I like the fairly simple style - I have one question though, why make all of the windows 7 themed controls yourself? If you are not bothered about running it on XP, what have you gained over just using the built in controls that already have the Windows 7 theme when run on Windows 7?
PS is this WPF or Winforms?
It's wpf of course. None of the standard controls (listbox, treeview, toolbar, etc) use the Windows 7 theme for me... They all have the standard solid blue selection rectangles and the toolbar looks just like the winforms toolstrip, in other words not at all like any real apps... Also i'd like it to look the same on xp, i just havent got an xp system to try it on.
Huh? You must have something set wrong then because all of the standard WPF controls have the theme of the OS you are running them on by default. If I just add a standard treeview control to a WPF window it looks exactly like yours does in that screenshot.
Nope, not for me :/
XAML:
Screenshot:Code:<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListBox Margin="5" x:Name="listBox" Grid.Column="0" />
<TreeView Margin="5" x:Name="treeView" Grid.Column="1">
<TreeViewItem Header="Item 1" />
<TreeViewItem Header="Item 2">
<TreeViewItem Header="Subitem 1" />
<TreeViewItem Header="Subitem 2" />
</TreeViewItem>
<TreeViewItem Header="Item 3" />
</TreeView>
</Grid>
</Window>
http://www.nickthissen.nl/Images/Temp/tmpAE9F.png
I even have this in the App.xaml which is supposed to turn on Aero themes, but no luck:
Code:<Application x:Class="WpfApplication2.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Aero;component/themes/Aero.NormalColor.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
I don't see the difference between that screenshot of the treeview and your original one? I thought you meant it was still giving you the little + symbols instead of the black triangles for expandable nodes like it would in XP. I see what you mean about the listbox selected item colour - that is the same for me, but to be honest I'd never really noticed as I always tend to apply a datatemplate to items in a listbox and get rid of the default selection highlighting etc.
No I'm mainly talking about the selection highlight. If you want to implement that for a TreeView you'll have to draw the arrow yourself too (since you have to create the entire control template). I got the TreeView code (everything besides the selection highlight) from somewhere else but it looks spot on. I made the selection highlights (consisting of two borders and various gradients) myself so that they look like the Windows 7 explorer theme even on other OSes (the default blue just looks horrible with the rest of the theme of my app).
I get your point about the custom data template, but in this case there's really nothing else to display besides a name so I went with the Windows 7 theme selection instead of some custom style.
Ah yeah that's fair enough then :) I'm just working on an app with a fairly simple treeview and listbox at the moment and now that you've pointed out the ugly blue selection colour I can't help but notice it lol might have to do something about that soon. Its still very early in the development of it but I'll post some screenshots in a minute
Cool. If you need my windows 7 style code just ask, I was going to put it in the codebank anyway but there's still some issues I need to fix.
Here we go. Its not really anything special in terms of looks, especially not at the moment as I only started working on it a couple of days ago. It does use a nice blur effect on the main window when a dialog window is shown though (as you can see in a couple of the screenshots). Oh and before anyone says it - yes I think I'm going to change the background colour of the main window :)
http://www.cjwdev.co.uk/Other/Ntfs2.png
http://www.cjwdev.co.uk/Other/Ntfs1.png
http://www.cjwdev.co.uk/Other/Ntfs3.png
http://www.cjwdev.co.uk/Software/NtfsReports/Ntfs7.png
Sorry for blatantly stealing your look of the OK and Cancel button area at the bottom of the dialog windows :D
Yeah that would be good cheers :)Quote:
Originally Posted by NickThissen
Oh and what did you end up doing for the large menu item buttons in your app (The New, Edit, and Delete buttons at the top) ? Are they just normal buttons with a custom template/style applied or are they menu items or what? I just used normal buttons for mine and set the background colour to transparent, which looks fine for the most part but after the buttons have been clicked they look a bit out of place.
Here you go. Keep in mind though that there's still a few issues (especially with the toolbar buttons) and that I may not be using the 'correct' way to handle things. I'm quite new to WPF and especially things like creating custom themes is something I've mainly just did using trial and error, I've never really read a book about it or something (I do have a book but didn't get that far yet:lol:), so I might be using the wrong practice everywhere... But the important thing I guess is the colors, brushes and control templates which do look the same as Windows 7 as far as I can tell.Quote:
Originally Posted by chris128
Thanks I'll have a play around with it :) and yeah don't worry I'm the same lol I have 2 WPF books in fact but I've never read much of either...
Hey, is that "blur effect" possible with Windows Forms ?
Thanks :wave:
By the way nice app chris. The only things I don't like is the abundance of light blue (so yeah I would change the background indeed), and the menu and statusbar colors. As for the blur effect that's pretty neat. Too bad you can't blur the window borders itself (right?) so it makes the border stand out a bit. Perhaps try overlaying a dark color as well as the blur, that might get rid of the 'hard edge' between the window contents and the border (right now it seems like it's blurring the edge colors with black so that there's a small black gradient at the edge, that might be less visible if the whole window is a little darker).
That's ok, it looks great doesn't it :) By the way, how do you make your OK and Cancel buttons equally wide? Do you simply set the Width? I've read that you shouldn't set the Width if you can avoid it so I've always been trying to get them about the same size using the Padding but I don't think there's a value that works...Quote:
Originally Posted by chris128
I wouldn't count on it, at least not in a simple way. You could perhaps take a screenshot of the window, dynamically place a picturebox on the window (on top of every control), blur the screenshot and show it in the picturebox, but that's likely really slow. I've never come across a good blurring technique in winforms that wasn't slow. The only reason it works for WPF is that WPF can use your graphic card to create the blur effect which is orders of magnitude faster.Quote:
Originally Posted by akhileshbc
Chris: followup question based on my last comment... How does the blur perform under Windows XP? As far as I understand there's no graphic card rendering in XP so it might be really slow.
Thanks for the info :thumb:Quote:
Originally Posted by NickThissen
:wave:
Yeah I just set the Width property to the same value for both.Quote:
Originally Posted by NickThissen
I use the following code to determine if the blur effect should be used or not:Quote:
Originally Posted by NickThissen
because any machine with a Tier of 0 or 1 is probably not going to be able to handle the blur with decent performance (more info here: http://msdn.microsoft.com/en-us/libr...lity.tier.aspx )Code:Dim UseEffects As Boolean = CInt(RenderCapability.Tier >> 16) > 1
Cool, didn't know you could do that, that's very useful!
Well im glad you asked because after reading the documentation that I linked to I have realised that tier 1 could probably handle the blur effect as well :) I always thought tier 1 was still pretty poor in terms of graphics power but it seems that it is not that much different to tier 2.
Here's my go at WPF. I didn't have anything practical to make, so I just made a quick demo of a POS application. I've never actually used a POS application before, so the general design probably isn't ideal. Looking back, I'd probably do it a lot differently, but I'm fairly satisfied with this.
In this demo, I actually didn't even use VS that much. Most of this was just done in Expression Blend. When I have an actual practical application to develop in WPF, I'll of course use VS a lot more.
http://img841.imageshack.us/img841/8504/posdemo.png
I really like it :) the buttons on the left maybe get a bit too dark though
Thanks. You mean the buttons underneath the "Menus" button? I suppose I could make them a bit lighter. They're the same color as the rest, just more opaque.Quote:
Originally Posted by chris128
But, this was a just a demo to get a little more familiar with WPF and Expression Blend. I'm trying to think of a practical application to create, so can really get into it.
I finally decided what I wanted to make in WPF, to expand my knowledge on it. I can make demo after demo, but if I don't make something practical with an end goal in mind, I don't think I'd ever learn as much.
So, I decided to make a desktop client for Reddit. I wanted to expand my knowledge on HTTP WebRequests, so I'm hitting two birds with this one.
Anyway, here's my UI so far. I've already figured out how to login with Reddit credentials and I'm working on grabbing user data and when that's done, I'll focus more on grabbing submissions, so the UI will expand a lot more when that happens.
http://img36.imageshack.us/img36/604...youreddit1.png
http://img703.imageshack.us/img703/2...youreddit2.png
Nice :) I like the simple icons on the top right and that logon screen looks nice too. One thing I would suggest that you might not be aware of if you are new to WPF (and this only applies if you are targetting .NET 4.0). To make the text less blurry you can set the following property on each TextBlock element:
or you can use a Style to apply this to all TextBlock elements in the window, like so:Code:<TextBlock Text="Some Text" TextOptions.TextFormattingMode="Display">
and for Images you can use the following to make them a bit sharper (note that if your images are not the same size on your window as the actual image file is then this may make them appear a bit pixelated):Code:<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
</Style>
</Window.Resources>
When testing these properties, never rely on the VS designer to give you an accurate representation of what the images/text will actually look like - run the program and see what it really looks like. The VS WPF designer is pretty poor in my opinion, it often displays things quite differently to how they actually look when you run the application.Code:<Image Source="example" RenderOptions.BitmapScalingMode="NearestNeighbor">
Hey Chris,Quote:
Originally Posted by chris128
Yeah, I'm fairly new to WPF. As for the blur, do you mean the blur while the log in form is displayed? Because that was intentional. I noticed how you used it in one of your apps and like how it looked when a dialog when is displayed. I currently have the blur Radius set to 5, but that can always be changed.
No I mean the slight blur that you get on all normal sized text in WPF (really large text looks better without that property I mentioned set). You might not notice it but trust me a lot of people will and it is very annoying. There's been a lot of complaints about this and so they added that property to WPF 4.0. See here for more info and examples: http://blogs.msdn.com/b/text/archive...rovements.aspx
Did you guys purchase those slick icons, or are the available for a tight wad such as myself for free?
I dunno about anyone else but I bought mine from here a couple of years ago: http://www.iconshock.com/
The icons I use in the Reddit app above, are free. But, I purchased the license to use them in my app at Custom Icon Design.Quote:
Originally Posted by wild_bill
Wow, all of these applications are very impressive. I've been meaning to get into WPF, the only thing that prevents me is that I've had some bad experiences with the designer and feel like it isn't very robust. After dabbling for ~10 minutes I crashed the designer and it wasn't a very friendly exit.
I wish I had some of the XAML of your posts so that I could dissect them.
Are you using VS 2010? I haven't had problems with the designer, just my own lack of knowledge.
I find the designer quite 'heavy', it seems to become slow really quickly, at least much slower than the code editor (for C#/VB). I've got 4GB of ram and an AMD Phenom II X6 cpu @3.5 GHz so that should be plenty imo... For the rest I don't really have any issues with the designer. You just have to step away from wanting to drag controls on the surface as you did with winforms (if you do this some strange properties will be set that you don't want), and you need to get used to the new layout system (no more absolute coordinates but all relative, more like web except without the CSS). Just figure out the layout system and write your controls in XAML, that is the easiest way imo :)
Yeah I always create all of the controls in XAML rather than dragging controls using the designer, like you said, things don't work as you would expect if you just drag n drop them on. Oh and yeah the designer is a little heavy and slow sometimes (even with 8 GB RAM, a solid state hard disk, a quad core CPU and a 1 GB graphics card) but I've just kind of got used to that.
While I'm here, here's a couple of updated screenshots of my current project, though not really doing anything that impressive visually, I hope it looks fairly clean and easy to use :)
http://www.cjwdev.co.uk/Other/Ntfs2-1.png
http://www.cjwdev.co.uk/Other/Ntfs2-3.png
The nice thing is that there's no VB code populating anything in those tabs on the right when the user clicks a specific node in the tree (or even telling it which tab to show), its all done through databinding :) Well actually there's a few lines of VB code in the Converters that some of the bindings use but not a lot.
Oh and I really need to get round to using your treeview style Nick to get rid of that ugly solid blue rectangle selection on the treeview! :)
I think it looks really good. It looks like a business application, and even though it does use WPF extensively (a few of the UI elements and obviously the databinding) it doesn't look cheesy as many other WPF applications. Good job!
The only thing that looks a little strange is the grey bar between treeview and tabcontrol (I guess it's a grid splitter?); I think it would look better if it was just transparent. Maybe use a small icon or such in the middle to indicate it can be dragged.
As for the databinding of the TabControl, I'm assuming you're using MVVM? So the TabControl is bound to a collection of viewmodels, and each type of viewmodel has a DataTemplate that tells the TabControl which view to use (the view is a UserControl)? I've recently been reading up on this techique and it works really well!
Yeah I really don't like the gridsplitter either and at some point I will try and make it look a bit nicer :)
As for MVVM, I've never got round to looking into it so I have no idea if I am using MVVM or not lol but probably not :P basically the treeview (ResultsTree) is bound to a List(Of SomeClass) and then the tab control itself has its datacontext set like so (so that all bindings on controls within the tab control are relative to the instance of SomeClass that is currently selected in the treeview):
Then the controls on the tab pages use bindings like this:Code:DataContext={Binding ElementName=ResultsTree,Path=SelectedItem}
Where SomeProperty is a property of SomeClass.Code:<TextBlock Text={Binding Path=SomeProperty}>
That XAML is all off the top of my head so might not be 100% correct but you get the idea :)
Here's my latest work, still a work in progress but I think it's coming along nicely :)
http://www.nickthissen.nl/Images/Persistent/tmp5B65.png
It's a 'black box' application for a racing sim, basically you put it on a secondary monitor and it displays useful information during a race. The grid in the middle shows the drivers around you, drivers near to you are displayed larger so they are more easily seen. The colors indicate the type of car they are driving.
Each 'toolwindow' is a dockable window and people can drag it around, resize it, etc. Each window is also a plugin, completely separate from the main app, and people can write their own plugins :)
I've recently added a dropshadow underneath each of these windows, that looks very nice I think, but don't have a screenshot of that.
@Nick: I am not much satisfied with the colors in 2nd column (the "NR" one). Also, the display of rows with different font sizes, is somewhat not appealing to me. It's a bit hard to read those names which are under longer distances. Maybe, you could try a different styling. Say, automatically sort them based on the POS or something else.
I liked it as whole. :thumb:
:wave:
The colors are the same as in the sim, so people know what they mean. As for the font sizes, you typically won't care about the drivers that far away from you, only those close to you. That's why I made them bigger. Also, you can now see them grow when they are aproaching you, so you get a kind of warning that a faster car is aproaching. In this case, the pink car is slow and the blue one is very fast, so this helps a lot in predicting when they will overtake you so you are not surprised. It actually works really well in practice!Quote:
Originally Posted by akhileshbc