Logo
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
EPL Standings
 
 
Windows Phone

Programming Windows Phone 7 : The Intricacies of Layout - Text Concatenation with StackPanel

3/2/2011 10:55:19 PM
A StackPanel with a horizontal orientation can concatenate text. This is demonstrated in the TextConcatenation project:
Example 1. Silverlight Project: TextConcatenation File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{StaticResource PhoneAccentBrush}">
<TextBlock Text="Two " />
<TextBlock Text="plus " />
<TextBlock Text="two " />
<TextBlock Text="equals " />
<TextBlock Text="four!" />
</StackPanel>
</Grid>

Here it is:



It might seem rather silly to concatenate text in this way, but it’s actually a very useful technique. Sometimes a program has some fixed text defined in XAML, mixed with some variable text from code or a data binding. The StackPanel does a nice job of piecing it together without any extraneous spacing. (In some cases you can alternatively use a TextBlock with its Inlines property set to multiple Run objects.)

Suppose you wanted the background color of the concatenated text to extend a little further beyond the boundaries of the text. You can’t do it with a Margin property on the StackPanel because that’s space outside the element. StackPanel doesn’t have a Padding property (alas), so you’d need to set Margin properties or Padding properties on all the individual TextBlock elements, and that doesn’t sound like fun.

An easier solution is to put the StackPanel in a Border element, and move all the alignment and Background settings to that Border:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Border Background="{StaticResource PhoneAccentBrush}"
Padding="12"
CornerRadius="24"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Two " />
<TextBlock Text="plus " />
<TextBlock Text="two " />
<TextBlock Text="equals " />
<TextBlock Text="four!" />
</StackPanel>
</Border>
</Grid>

Now you get a nice comfortable background with rounded corners:



Other -----------------
- Programming Windows Phone 7 : The Intricacies of Layout - The StackPanel Stack
- Programming Windows Phone 7 : The Intricacies of Layout - The Single-Cell Grid
 
 
Most view of day
- What's new and improved in SharePoint 2013 : Previewing search documents, Using the Community Site template
- Windows Server 2012 Requirements and Installation : Customizing the Interface with Features on Demand
- Microsoft Dynamics CRM 4.0 : Using Microsoft Dynamics CRM with Microsoft SharePoint
- Microsoft Dynamics Ax 2009 : RunBase Framework Extension (part 4) - Adding a Query
- Microsoft Lync Server 2010 : Planning for Voice Deployment - Voice Resilience
- Exchange Server 2007 : Using OWA Mail Features (part 3)
- Windows Server 2012 : Configuring IPv6/IPv4 interoperability (part 3) - IPv6 address representation
- Working in the Background : WORKING WITH THE NETWORK LIST MANAGER
- Microsoft Exchange Server 2007 : Load Balancing in Exchange Server 2007
- Microsoft Dynamic CRM 4 : Data Migration (part 4) - Creating a Data Migration
Top 10
- Windows Server 2012 : DHCP,IPv6 and IPAM - Exploring DHCP (part 3) - Creating IPv4 DHCP Scopes
- Windows Server 2012 : DHCP,IPv6 and IPAM - Exploring DHCP (part 2) - Installing DHCP Server and Server Tools
- Windows Server 2012 : DHCP,IPv6 and IPAM - Exploring DHCP (part 1)
- Windows Server 2012 : DHCP,IPv6 and IPAM - Understanding the Components of an Enterprise Network
- Microsoft OneNote 2010 : Using the Research and Translate Tools (part 3) - Translating Text with the Mini Translator
- Microsoft OneNote 2010 : Using the Research and Translate Tools (part 2) - Translating a Word or Phrase with the Research Pane
- Microsoft OneNote 2010 : Using the Research and Translate Tools (part 1) - Setting Options for the Research Task Pane, Searching with the Research Task Pane
- Microsoft OneNote 2010 : Doing Research with Linked Notes (part 2) - Ending a Linked Notes Session, Viewing Linked Notes
- Microsoft OneNote 2010 : Doing Research with Linked Notes (part 1) - Beginning a Linked Notes Session
- Microsoft OneNote 2010 : Doing Research with Side Notes (part 3) - Moving Side Notes to Your Existing Notes
 
 
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro