Specific layout for Windows Phone 7 - silverlight

I would like to create this layout in Silverlight. The text need to wrap around the picture :
The closest solution i find is that but this is not exactly what i would like.
<StackPanel Margin="0,0,0,20">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<StackPanel Orientation="Horizontal" >
<Image Source="{Binding Img}" MaxWidth="100" />
<TextBlock Text="{Binding Desc}" TextWrapping="Wrap" Margin="0,10,0,5" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>

Best I can come up with is to use a grid
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<TextBlock Text="Title" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" />
<TextBlock Text="Image" Grid.Row="1" Grid.Column="0" />
<TextBlock Text="Description" TextWrapping="Wrap" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" />
</Grid>
Another Suggestion would be to use the RichTextBox. I got not too bad results using
<RichTextBox Width="400" Height="400" FontSize="40">
<Paragraph>
<InlineUIContainer >
<Image Source="/image.png" Width="100" Height="200" />
</InlineUIContainer>
<Run Text="A simple RichTextBox with Image: " />
<Italic Foreground="YellowGreen">Some Italic Text Here!</Italic>
</Paragraph>
</RichTextBox>

Related

Avoid Clipping when translated into height (supporting different resolution)

I'm making an application in which i've used some controls inside Grid Panel. Its working fine but there is a problem for different screen resolution. The Grid controls cannot adapt screen resolution and clip out some control in Height. Whereas width adapt screen resolution correctly. The before and after image is under as you can see when translated into height, cause clipping problem. How to resolve this?
before translated into height:
after translated into height:
Code:
<Grid Grid.Row="3">
<Grid.Background>
<SolidColorBrush Color="#FF3E7038" Opacity="0.3"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Customer:" Grid.Column="0" Margin="10"/>
<controls:AutoCompleteBox Margin="0,10,10,0" Name="CustomerSearch" IsTextCompletionEnabled="True" SelectedItem="{Binding Name, Mode=TwoWay}" Grid.Column="1" PreviewKeyDown="CustomerSearch_PreviewKeyDown" >
<controls:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Code}"/>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Address}"/>
<TextBlock Text="{Binding Contact}"/>
</StackPanel>
</DataTemplate>
</controls:AutoCompleteBox.ItemTemplate>
</controls:AutoCompleteBox>
<TextBlock Text="Gross Amount:" Grid.Column="2" VerticalAlignment="Center" />
<TextBox Margin="5,10,0,0" Name="GrossAmount" Text="0.0" Grid.Column="3" IsReadOnly="True"/>
<TextBlock Text="Discount%:" Grid.Column="2" Grid.Row="1"/>
<TextBox Name="Discount" Text="0.0" Grid.Column="3" Grid.Row="1" PreviewTextInput="Discount_PreviewTextInput" PreviewKeyDown="Discount_PreviewKeyDown" />
<TextBlock Text="Net Pay:" Grid.Column="2" Grid.Row="2"/>
<TextBox Name="NetPay" Text="0.0" Grid.Column="3" Grid.Row="2" PreviewTextInput="Discount_PreviewTextInput" PreviewKeyDown="Discount_PreviewKeyDown" />
<TextBlock Text="Paid:" Grid.Column="2" Grid.Row="3"/>
<TextBox Name="Paid" Text="0.0" Grid.Column="3" Grid.Row="3" PreviewTextInput="Paid_PreviewTextInput" PreviewKeyDown="Paid_PreviewKeyDown"/>
<TextBlock Text="Return:" Grid.Column="2" Grid.Row="4"/>
<TextBox Name="Return" Text="0.0" Grid.Column="3" Grid.Row="4" IsReadOnly="True"/>
<WrapPanel Grid.Row="5" Margin="0,10,0,0" Grid.ColumnSpan="5" Grid.Column="2">
<Button Name="CheckoutBtn" Margin="0,0,5,0" PreviewKeyDown="CheckoutBtn_PreviewKeyDown" Click="CheckoutBtn_Click" >
<StackPanel Orientation="Horizontal">
<Image Width="40" Height="40" Stretch="Uniform" Source="/Images/checkout.png"/>
<Label Content="CHECKOUT" />
</StackPanel>
</Button>
<Button Name="CancelBtn" Margin="0,0,5,0" Click="CancelBtn_Click" >
<StackPanel Orientation="Horizontal">
<Image Width="40" Height="40" Stretch="Uniform" Source="/Images/cancel.png"/>
<Label Content="CANCEL" />
</StackPanel>
</Button>
<Button Name="SaveBtn" Click="SaveBtn_Click" Margin="0,0,5,0">
<StackPanel Orientation="Horizontal">
<Image Width="40" Height="40" Stretch="Uniform" Source="/Images/save.png"/>
<Label Content="SAVE" />
</StackPanel>
</Button>
</WrapPanel>
</Grid>

Viewbox and text bad rendering

I've a ViewBox that's have this content:
<Viewbox Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Stretch="Fill" >
<StackPanel Orientation="Vertical" >
<Label HorizontalAlignment="Center" Content="Latest Match" FontSize="10"/>
<TextBlock Background="WhiteSmoke" Width="300"/>
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
</StackPanel>
</Viewbox>
when I enlarge the window I get this:
how you can see the text Latest match seems compressed in width, how can I fix this having a text that doesn't compress in width?
You must set a different value to Stretch property of Viewbox.
Probably Uniform in you case.
See this link
Try this code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Stretch="Fill" >
<StackPanel Orientation="Vertical" >
<Label HorizontalAlignment="Center" Content="Latest Match" FontSize="10" />
<TextBlock Background="WhiteSmoke" Width="300"/>
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
</StackPanel>
</Viewbox>
</Grid>

TextBlock TextWrapping not wrapping inside StackPanel

I have a StackPanel, but the following line :
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Notes}" TextWrapping="Wrap" />
is not Wrapping the Text.
<StackPanel Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="15" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0">
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Id, StringFormat='#\{0\}'}" />
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Name}" />
</DockPanel>
<TextBlock Grid.Row="0" Grid.Column="4" FontWeight="Bold" Text="{Binding Path=Time, StringFormat={}{0:HH:mm}}" />
<Image
Grid.Row="0"
Grid.Column="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Path=Image, Mode=OneWay, Converter={StaticResource ImageConverter}}" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Notes}" TextWrapping="Wrap" />
<Image
Grid.Row="1"
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{Binding Path=Picture, Mode=OneWay, Converter={StaticResource PictureConverter}}" />
</Grid>
</StackPanel>
The StackPanel Orientation is set to 'Vertical' but the TextBlock is not inheriting it.
Where am I going wrong?
Your problem is using the StackPanel that allows its children to fill in all the available space - the StackPanel stretches accordingly to the size of its content. Try removing the StackPanel and keep just the Grid - this way you will limit the size of its children to the available space used by the Grid.
If that isn't enough in the layout you've built, try setting a MaxWidth on the TextBox that needs wrapping.
Now the source of your problem was also the fact that your TextBox was inserted in the first Column of the Grid that had an infinite size (Width="Auto"). Thus, setting the Grid.Column="7" to the TextBox did the trick you wanted (wrapping text). Here's the revised code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="15" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0">
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Id, StringFormat='#\{0\}'}" />
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Name}" />
</DockPanel>
<TextBlock Grid.Row="0" Grid.Column="4" FontWeight="Bold" Text="{Binding Path=Time, StringFormat={}{0:HH:mm}}" />
<Image
Grid.Row="0"
Grid.Column="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Path=Image, Mode=OneWay, Converter={StaticResource ImageConverter}}" />
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="7" Text="{Binding Notes}" TextWrapping="Wrap" />
<Image
Grid.Row="1"
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{Binding Path=Picture, Mode=OneWay, Converter={StaticResource PictureConverter}}" />
</Grid>

Using Separator in StatusBar

I have a WPF Window with a StatusBar control. Below is the xaml for my status bar. I am trying to place a Separator between the StatusBarItems. But what happens is that all the separators are positioned right after the first StatusBarItem.
How can I get the Separators to be positioned after each Item in the StatusBar?
I do notice that if I am not using the ItemsPanelTemplate that the separators work correctly. How can I get the separators in the below xaml to position correctly?
<StatusBar Grid.Row="2" Height="23" Name="myStatusBar" VerticalAlignment="Bottom" >
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem Grid.Column="0">
<StackPanel Orientation="Horizontal">
<Image Source="..\Images\bullet_green.png" Height="15" Width="15" />
<TextBlock Name="txtStatus" Height="18" Width="77" Text="{Binding StatusBarStatus}"/>
</StackPanel>
</StatusBarItem>
<Separator Width="1"/>
<StatusBarItem Grid.Column="1">
<StackPanel Orientation="Horizontal">
<Image Source="..\Images\user_add.png" Height="15" Width="15" />
<TextBlock Name="txtCurrentContact" Text="{Binding StatusBarCurrentContact}" />
</StackPanel>
</StatusBarItem>
<Separator Width="1"/>
<StatusBarItem Grid.Column="2">
<!--<ProgressBar Value="30" Width="80" Height="18"/>-->
<StackPanel Orientation="Horizontal">
<Image Source="..\Images\database03.png" Height="15" Width="15" />
<TextBlock Name="txtDatabase" Text="{Binding StatusBarDatabase}" />
</StackPanel>
</StatusBarItem>
<Separator Width="1"/>
<StatusBarItem Grid.Column="3">
<TextBlock Name="txtMode" Text="{Binding StatusBarMode}"/>
</StatusBarItem>
<StatusBarItem Grid.Column="4">
<TextBlock Name="txtTally" Text="{Binding StatusBarTally}"/>
</StatusBarItem>
</StatusBar>
All of your separators are in Column 0. Put them in a column ie:
<StatusBarItem Grid.Column="0">
<StackPanel Orientation="Horizontal">
<Image Source="..\Images\bullet_green.png" Height="15" Width="15" />
<TextBlock Name="txtStatus" Height="18" Width="77" Text="{Binding StatusBarStatus}"/>
</StackPanel>
</StatusBarItem>
<Separator Width="1" Grid.ColumnSpan="2" Grid.Column="0" HorizontalAlignment="Center"/>
<StatusBarItem Grid.Column="1">
<StackPanel Orientation="Horizontal">
<Image Source="..\Images\user_add.png" Height="15" Width="15" />
<TextBlock Name="txtCurrentContact" Text="{Binding StatusBarCurrentContact}" />
</StackPanel>
</StatusBarItem>

WPF Grid Items and Right Aligned Text

I have a WPF form where I'm trying to make a simple input form. Two labels, two textboxes, and a "submit" button. I have the layout pretty good, the only thing that I can't get is for my "Labels" to be right aligned inside their cells. I have tried both TextAlign="Right" and HorizontialAlign="Right", that moves the text ALL the way over, overlaying my textbox, not just moving inside the cell. Below is the XAML for the window.
<Window x:Class="MyWebKeepAliveDesktop.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyWebKeepAlive Desktop - Login" WindowStyle="None" AllowsTransparency="true" Height="200" Width="400" >
<Border Background="#50FFFFFF" CornerRadius="7" BorderBrush="{StaticResource WindowFrameBrush}" BorderThickness="2,0,2,2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="{StaticResource WindowFrameBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
CornerRadius="5,5,0,0" Margin="-1,0,-1,0" MouseLeftButtonDown="DragWindow">
<Grid>
<TextBlock Foreground="White" FontWeight="Bold" VerticalAlignment="Center" Margin="10,2,10,2"
Text="MyWebKeepAlive Desktop Login"/>
<Button Content="X" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5" FontSize="7"
Width="15" Height="15" Padding="0" Command="ApplicationCommands.Close"/>
</Grid>
</Border>
<Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="10" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="Username" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
<TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Password" FontWeight="Bold" Grid.Row="2" />
<TextBox Name="txtPassword" Width="150" Grid.Row="2" />
<Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2">
<TextBlock Text="Login" />
</Button>
</Grid>
</Grid>
</Border>
</Window>
Your grid only has one column as written. It will need two to support your setting of Grid.Column=1 for the text boxes. Thus, you need to add a <ColumnDefinitions> block. With the XAML the way it is now, WPF just throws both controls into the same column, hence the behavior you are seeing.
Here's what I came up with. Just learning WPF myself. As PeterAllenWebb mentioned, your main issue is you are missing the ColumnDefinitions. I also added the TextAlignment="Right" attributes to the two TextBlocks.
<Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="10" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="Username" TextAlignment="Right" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
<TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Password" TextAlignment="Right" FontWeight="Bold" Grid.Row="2" />
<TextBox Name="txtPassword" Width="150" Grid.Row="2" Grid.Column="1"/>
<Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2">
<TextBlock Text="Login" />
</Button>
</Grid>

Resources