I'm focusing on the thread title: The "What do you think of how my app looks" thread ;)Quote:
Originally Posted by chris128
:wave:
Printable View
I'm focusing on the thread title: The "What do you think of how my app looks" thread ;)Quote:
Originally Posted by chris128
:wave:
haha fair enough :) for a VB6 app I would say it looks pretty amazing! The only thing that lets it down for me is the column headings, they look a little bold and sharp compared to everything else that is quite smooth. Doesn't ruin it or anything but that's the only thing I'm not keen on :)
Thanks :wave:Quote:
Originally Posted by chris128
I couldn't find a good font at the time of development. :)
So, I have come up with that at the end. But the contents of the ListView is colored based on the marks(exam results) obtained. That is for a failed subject, it would color the row in red and for the rest, it will be in green.
I'm planning to release a new version in VB.Net. Will focus on clearing these issues and making it better. :thumb:
I'm a fan of cool and modern GUIs. All those snapshots posted in this thread looks charming. :thumb:
Well I've finally really started to work with WPF, and I must say it's a lot more powerful than I initially thought :) I thought it was all about the looks but the databinding is amazingly powerful...!
Anyway, I thought I'd share my test app here. It's a simple contact manager application, of which 39838523 (at the time of writing) already exists, but the point is to learn WPF so there :)
http://i51.tinypic.com/e8pwfk.png
There's a lot of glass but I think it still looks pretty decent. The Toolbar is still crappy, as well as the 'group selection' combobox (I'm thinking of doing something completely different there; like a horizontal scrolling thingy where the user can scroll through groups and select one) which looks completely out of place. The blueish colors of the rounded rectangles aren't very nice either but I can't seem to find a color that suits... But I think it's not bad for a first try :)
I am using Expression Blend and VS at the same time though, I find in EB it is easy to select colors (obviously because you can see them change in real-time) and add borders around objects, but for some reason it doesn't seem to understand grid layouts. If I have a grid with two rows and want to place a border around an element in the second row, then instead of setting Grid.Row="1" on the border it adds a ridiculous Margin. It looks the same in the designer but it's not, and I have to go back and change it in VS each time. Am I doing anything wrong??
No you are not doing anything wrong, and I find VS usually does the same to be honest. It is annoying but I have learnt to just do all of my control creation and general layout stuff in XAML by hand, then just use the Belnd designer for things like picking colours and adding animations.
As for the look of your app, I like it :) other than the menu text being hard to see on the glass but I think you said you already plan on fixing that. I hope you can post another screenshot when it is completely finished :)
Nice look, NickThissen :thumb:
:wave:
Here's an update. Still trying to figure out how to change the style of a ToolBar / Menu (I cannot figure out how to change the look of selected / hovering items) so for now I just gave them a slightly different color to make them stand out and make the text more readable.
I also removed the thick borders and removed some of the glass / transparency. Finally the lists also contain the contact images now, and the image on the 'edit contact' window looks a bit nicer too.
http://i52.tinypic.com/rc53fb.jpg
How would these applications would appear in a XP machine ? Do you guys have some virtual PC to test this apps in WinXP OS ? Because there's some glass effect which makes the GUI cool. But in an XP machine, I think the glass effect portion might look bad.
:wave:
In XP the background should be just white (though I didn't test it). Anyway, the purpose of my app is to learn WPF, so it's not going out to anyone anyway so I don't really care how it looks in XP :p
okay :)Quote:
Originally Posted by NickThissen
This is an app for Phone 7 devices, but the UI is created in WPF so I think I an allowed to post here :D It is still in the very first fase of development...
Nice :) though the screenshots are a bit big! :P
Oh and also, maybe its just me but I'd like to see the corners of those buttons rounded. But then I'm a sucker for rounded corners..
The screenshots are the same as the MarketPlace screenshots (480x800).
The buttons will probably be rounded I think but this version needed the finished quickly so my customer could see that Phone 7 is the best choice :D
When the app is a little more finished I'll post more pictures
Ah I see, look forward to it :)
I'm creating a Calendar control similar to the Outlook calendar in month view. It's not finished yet, I still have to add appointments to it (but that shouldn't be too hard). I think it looks pretty good, and it was much easier than I expected :) I'm still having some trouble with triggers getting the day that the mouse is over to highlight, but I'll get that fixed soon enough I think, maybe with your help (there's a topic on it) ;)
http://i55.tinypic.com/x6gbjp.jpg
It works really well, all I need to do is supply it a month and a year and it shows the correct days, even those in the previous and next month that happen to fall in the first and last week of the shown month, just like Outlook does.
I'm not sure if I'm going to add week/day view, probably not as I don't need it at the moment, but I might need it in the future (well, I'm pretty sure I will but that's not for a long time) so I'll think about it.
Looking good! :) What is it made out of? Is it a listbox with a custom data template or more complicated than that?
No, much easier (but less 'correct' and less easily extendible I guess). The whole control is basically one grid. It has 7 columns and starts with just one row. Then it has a BuildCalendar method where I calculate the start and end dates based on the month it needs to display (in the case of the screenshot: may 29th and july 2nd). Then a simple loop increments the date by one each time and adds a new DayControl, which is a UserControl with a label (the header) and a ListBox (which will hold the appointments). For each control I increment the column and row and set them. When the column number reaches 6 I wrap around to 0 again and create a new RowDefinition in the grid (it has to be dynamic, for some months it displays 5 rows, for some months it needs 6 rows).
So yeah, pretty simple, but it works fine for me. The only thing I am not supporting is appointments spanning multiple days. That won't work with my approach since the appointments go into the ListBox in the DayControl; they'd have to go on top of all the DayControls in order to be able to span multiple days... But I don't need that anyway.
Ah I see, well yeah there's always more than one way to do things :) and whilst there is probably a and "more WPF" way of doing it, if that way works for you then its all good. Certainly looks the part anyway :D
And an other Phone 7 app (also WPF), it displays the current location of the ISS and the orbit for the next hour:
Small update, appointments now show. You can choose different colors (I've implemented red, blue, green, yellow, white and black but a user can inherit AppointmentColor and return his own colors for the top and bottom of the gradient, text and border.
http://i56.tinypic.com/wtx1jd.png
The small calendar on the right can be used to navigate to a certain date quickly; if you select a date there it is also selected in the month view calendar. This is not part of the month view calendar, I've implemented it in the main form.
I think the appointments look good, but the space is a little small (either that or the window has to be very large), so I am still experimenting with some methods to get the space larger. I've actually tried enlarging the selected day by a smooth animation. That worked in theory but it was awkward to work with; it was almost impossible to select the day you wanted because every time you move your mouse some days are enlarging and others are shrinking and you basically couldn't make sense of what you were seeing anymore :p
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