StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
940544
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2009-06-02T16:35:16.340
FavoriteCount
0
LastActivityDate
2009-06-02T16:35:16.340
LastEditDate
LastEditorUserId
0
OwnerUserId
112250
ParentId
939411
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
I'm not aware of any built-in functionality that can do this, but you could write a custom control to do so. The salient part of such a control would be a 9 part grid in which 4 parts were of fixed size (the corners), two parts had fixed heights and variable widths (center top and center bottom), two parts had fixed widths and variable heights (left center and right center), and the final part had variable height and width (the middle). Stretching in only one direction (e.g. making a button that only grows horizontally) is as simply as limiting the middle portion's height. In XAML, that would be: <pre><code><Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="20"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="20"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="20"/> <RowDefinition Height="*"/> <RowDefinition Height="20"/> </Grid.RowDefinitions> </Grid> </code></pre> Then you'd add objects to paint the images on to (I'll use Rectangles), as well as an object to put content into (ContentPresenter): <pre><code><Rectangle Grid.Row="0" Grid.Column="0" x:Name="TopLeft"/> <Rectangle Grid.Row="0" Grid.Column="1" x:Name="TopCenter"/> <Rectangle Grid.Row="0" Grid.Column="2" x:Name="TopRight"/> <Rectangle Grid.Row="1" Grid.Column="0" x:Name="CenterLeft"/> <Rectangle Grid.Row="1" Grid.Column="2" x:Name="CenterRight"/> <Rectangle Grid.Row="2" Grid.Column="0" x:Name="BottomLeft"/> <Rectangle Grid.Row="2" Grid.Column="1" x:Name="BottomCenter"/> <Rectangle Grid.Row="2" Grid.Column="2" x:Name="BottomRight"/> <Grid Grid.Row="2" Grid.Column="1" x:Name="Middle"> <Rectangle/> <ContentPresenter x:Name="MiddleContent"/> </Grid> </code></pre> Each of the Rectangles can be painted using an ImageBrush so that they show the correct portion of your source image: <pre><code><Rectangle> <Rectangle.Fill> <ImageBrush ImageSource="Image.png" TileMode="None"  /> </Rectangle.Fill> </Rectangle> </code></pre> Wrapping all of that up into a custom control, you could produce a pretty usable 9-slice image control: <pre><code><local:NineSliceImage Image="Source.png" Slice="20,20"> <TextBox Text="Nine Slice Image TextBox!"/> </local:NineSliceImage> </code></pre> Where Slice is a property of type System.Windows.Size, so that you can use it like the Margin/Padding/etc. properties for setting the position of the slices. You'll also want to set SnapToDisplayPixels to True on all of the Rectangles; otherwise, you'll see small gaps between the pieces of the image at certain resolutions as WPF tries to interpolate the in-between pixels. An alternative, slightly faster way of doing this if you plan to use a lot of these controls is to override OnRender and do it there; I've done this in the past for a 3-slice image control, but it's quite a bit more tricky. That should get you most of the way there - if there's anything I'm missing, leave a comment.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. PO9-Slice Images in WPF
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USNicholas Armstrong
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. PO9-Slice Images in WPF
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTAcceptedByOriginator
2. 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.