StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20143014
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-11-22T10:49:10.243
FavoriteCount
0
LastActivityDate
2013-11-22T10:49:10.243
LastEditDate
LastEditorUserId
0
OwnerUserId
249281
ParentId
20139422
PostTypeId
2
Score
3
ViewCount
0
LastEditorDisplayName
text
Body
<p>Surely the control in your image is just a <code>Menu</code> control that has a custom <code>ControlTemplate</code>. We can give the <code>Menu</code> control a new <code>ItemsPanelTemplate</code> to make it work vertically instead of the usual horizontal look. Unfortunately I don't have time to complete this, but I've started you off:</p> <pre><code><Menu FontFamily="Segoe UI" Background="#FF3C454F" TextElement.Foreground="White"> <Menu.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Vertical"/> </ItemsPanelTemplate> </Menu.ItemsPanel> <Menu.Resources> <Style TargetType="MenuItem"> <Setter Property="Padding" Value="40, 20" /> </Style> </Menu.Resources> <MenuItem Header="COMPUTER"> <MenuItem Header="WEBSITE" /> <MenuItem Header="VIRTUAL MACHINE" /> <MenuItem Header="MOBILE SERVICE" /> </MenuItem> <MenuItem Header="DATA SERVICES"> <MenuItem Header="WEBSITE" /> <MenuItem Header="VIRTUAL MACHINE" /> <MenuItem Header="MOBILE SERVICE" /> </MenuItem> <MenuItem Header="NETWORK SERVICES"> <MenuItem Header="WEBSITE" /> <MenuItem Header="VIRTUAL MACHINE" /> <MenuItem Header="MOBILE SERVICE" /> </MenuItem> </Menu> </code></pre> <p>There's still lots for you to do though... the most important part will be to define a new <code>ControlTemplate</code> the <code>Menu</code> and the <code>MenuItem</code>s. You'll need to move the next level of <code>MenuItem</code>s from the current <code>Popup</code> control to the next column in a <code>Grid</code>. </p> <p>The best way to start this job is to use the default <code>ControlTemplate</code> and then 'tweak' it to your liking once you have it working as normal. You can find the default <code>ControlTemplate</code> in the <a href="http://msdn.microsoft.com/en-us/library/ms752296%28v=vs.110%29.aspx" rel="nofollow">Menu Styles and Templates</a> page on MSDN. Another resource can be found on the <a href="http://msdn.microsoft.com/en-us/library/ms747082%28v=vs.85%29.aspx" rel="nofollow">MenuItem ControlTemplate Example</a> page, although it might have the same code, I'm not quite sure.</p> <p>One final point I'd like to make is that if this project proves to be too difficult for you, you could probably make your UI look like your image using a number of <code>ListBox</code> controls, where the items represent the menu items. It would be quite easy to change the items dependant on the previous menu item that the user clicked on.</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POWPF - Windows Azure Style TabControl(?)
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USSheridan
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.