I want to place an image at top left of screen. and a TextBlock at center of same line as image placed. Means at the top of screen there should be an image at left and a TextBlock at center. I tried like below. But both image and TextBlock are seems to be aligned at center.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="AliceBlue" VerticalAlignment="Top">
<Image x:Name="icon_goback2" Source="Assets/icon_home.png" Margin="10,0,0,0" Height="50" Width="50" />
<TextBlock Text="Your Page" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="70" />
</StackPanel>
Just use a Grid and set HorizontalAlignment as Left and Center for Image and TextBlock respectively
<Grid VerticalAlignment="Top">
<Image HorizontalAlignment="Left"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
You can try the following code :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image x:Name="icon_goback2" Source="Assets/icon_home.png" Margin="10,0,0,0" Height="50" Width="50"/>
<TextBlock Grid.Column="1" Text="Your Page" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="70"/>
</Grid>
What this code will do is divide your grid into 3 Columns and place the <Image> in the 1st Column (Grid.Column="0") and <TextBlock> in the 2nd Column (Grid.Column="1"). You can additionally change the alignment of Image and Texblock if you need to.
Also, it is good to note that StackPanel will always override the Horizontal alignment of the Child elements when you are setting its orientation as horizontal. This is the reason why using a grid and dividing it into multiple rows and columns is better in scenarios like this.
Edit :
Since you have quite a large textblock you can change the column definitions to something like this :
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
This will divide your grid into 2 parts with the column widths set automatically.
Hope this helps.
Related
Given the following markup, I would have expected the chevron to go all the way to the right of the button, but it doesn't - instead, the stack panel and the chevron are tight together in the middle of the button.
<Button Background="Teal" HorizontalAlignment="Stretch">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel HorizontalAlignment="Stretch"
Grid.Column="0">
<TextBlock HorizontalAlignment="Center"
TextAlignment="Center"
FontSize="60">Click!</TextBlock>
<TextBlock HorizontalAlignment="Stretch"
TextAlignment="Center"
FontSize="20">Cool things will happen</TextBlock>
</StackPanel>
<TextBlock Grid.Column="1"
FontSize="60"
FontFamily="Segoe UI Symbol">
<!-- unicode for chevron right in this font -->
</TextBlock>
</Grid>
</Button>
You can try to set the HorizontalContentAlignment of the button to Stretch.
I've posted a similar question in the past but never quite resolved it and so here I am again.
In my layout grid, I have an image which takes the full area but I also display another grid which is vertically aligned to the bottom, has its background color set and its opacity set to .5.
This part works fine.
Now, I want to display another grid within that grid which will contain another image (a logo) and a TextBlock which contains a description.
My problem is that both the image and textblock are being dimmed. While I have no problem with the logo being dimmed, I do want to keep my description fully opaque but can't seem to be able to do this.
Is there a way to achieve this? Note I'm trying to build a custom tile for WP8.
Here is the code:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Stretch="UniformToFill" Source="/Assets/0.jpeg" ></Image>
<Grid Background="#0F558E" Opacity="0.5" Visibility="Visible" Height="100" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="/Assets/Tiles/FlipCycleTileSmall.png" Width="100" Height="100" Grid.Column="0" Opacity="1" ></Image>
<TextBlock Foreground="White" FontSize="30" Text="This is a simple description of the article" TextWrapping="Wrap" Margin="10,0,30,0" Grid.Column="1" Opacity="1" />
</Grid>
</Grid>
Thanks.
As you found out, everything that is a child of that grid is going to have a 0.5 opacity, and any opacity settings on the children are going to be relative to that.
Could you just overlay a third grid on top of the second that has the same sizing and contains your image and text? I don't have anything in front of me to test this at the moment, but something like:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Stretch="UniformToFill" Source="/Assets/0.jpeg" ></Image>
<Grid Background="#0F558E" Opacity="0.5" Visibility="Visible" Height="100" VerticalAlignment="Bottom">
</Grid>
<Grid Visibility="Visible" Height="100" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="/Assets/Tiles/FlipCycleTileSmall.png" Width="100" Height="100" Grid.Column="0" Opacity="1" ></Image>
<TextBlock Foreground="White" FontSize="30" Text="This is a simple description of the article" TextWrapping="Wrap" Margin="10,0,30,0" Grid.Column="1" Opacity="1" />
</Grid>
</Grid>
In windows Phone XAML, I have a StackPanel in Horizontal Orientation and I want it's child UI controls to share equal available width equally or in my case, I want TextBlock to share 1/3 and TextBox to get 2/3 of available width. How I can get that without giving hard coded values to width?
Below is the code example.
<StackPanel Orientation="Horizontal">
<TextBlock Text="Bill Total: "
VerticalAlignment="Center"/>
<TextBox InputScope="Number"
VerticalAlignment="Center"
PlaceholderText="Bill Total"
AcceptsReturn="True"
x:Name="txtBillTotal"
/>
</StackPanel>
As far as I can see, you can't do that with StackPanel. Try to use Grid instead with column definitions width set proportionally :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Bill Total: "
VerticalAlignment="Center"/>
<TextBox Grid.Column="1"
InputScope="Number"
VerticalAlignment="Center"
PlaceholderText="Bill Total"
AcceptsReturn="True"
x:Name="txtBillTotal"
/>
</Grid>
That will set the 2nd column twice wider than the 1st, which means 2/3 Grid width. And the rest 1/3 given to the 1st column.
I'm struggling to understand how the xaml controls can help me accomplish the following layout:
I have a 3-column layout. The leftmost and center columns have listviews. The rightmost column simply has a clickable (tappable) stackpanel that navigates elsewhere. I want this stackpanel to be anchored to the right side of the page, halfway down (i.e. in CSS I would say right: 0, top: 50%).
My XAML is below. My strategy has been to create a horizontal parent stackpanel containing all 3 columns, and a vertical stackpanel with a textblock on top of a listview control in the leftmost and middle columns. However, the third stackpanel behaves in some unexpected ways:
It does not fill the horizontal space remaining to the right of the second stack panel. It seems to prefer to only take up the space required by whatever its child controls require. This means that I have to assign static values to child elements to try to line the clickable control up with the right side of the page. This means that when screen resolutions are different than what I'm designing for, this clickable control will be either off the right side of the page, or toward the middle of the page.
I can't coerce the clickable element in the third column (stackpanel, or any other control I try to use) to move halfway down the page. As I mentioned above, I want it to be halfway down the page, but it stubbornly sits at the top of its containing stackpanel.
I've looked at the canvas control, but don't want this to be static - this is so easy in CSS, I'm not sure why it's so complicated in XAML.
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1160"/>
<ColumnDefinition Width="206"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<StackPanel
Orientation="Vertical"
Margin="0,0,40,0">
<StackPanel
Height="100"
Width="400"
HorizontalAlignment="Left"
Margin="40,15,0,0">
<StackPanel.Background>
<SolidColorBrush>
<Color>#FFFFFF</Color>
</SolidColorBrush>
</StackPanel.Background>
<TextBlock
Text="Announcements"
FontSize="42"
FontWeight="Light"
TextAlignment="Left"
Padding="0,25,25,25">
</TextBlock>
</StackPanel>
<ListView
HorizontalAlignment="Left"
Height="475"
Margin="40,15,0,0"
VerticalAlignment="Top"
Width="400"
ItemsSource="{Binding Incidents}"
IsItemClickEnabled="True"
SelectionMode="None"
ItemTemplate="{StaticResource Standard130ItemTemplate}"
ItemClick="Item_Click" >
</ListView>
</StackPanel>
<StackPanel
Orientation="Vertical"
Margin="40,0,0,0">
<StackPanel
Height="100"
Width="600"
HorizontalAlignment="Right"
Margin="0,15,40,0">
<StackPanel.Background>
<SolidColorBrush>
<Color>#FFFFFF</Color>
</SolidColorBrush>
</StackPanel.Background>
<TextBlock
Text="News from Yammer"
FontSize="42"
FontWeight="Light"
TextAlignment="Left"
Padding="0,25,25,25">
</TextBlock>
</StackPanel>
<ListView
HorizontalAlignment="Left"
Height="475"
Margin="40,15,0,0"
VerticalAlignment="Top"
Width="Auto"
ItemsSource="{Binding Incidents}"
IsItemClickEnabled="True"
SelectionMode="None"
ItemTemplate="{StaticResource Standard130ItemTemplate}"
ItemClick="Item_Click" >
</ListView>
</StackPanel>
<StackPanel Background="AliceBlue" Width="206" Height="628">
<TextBlock x:Name="stackPanel" Background="Black" Height="50" Width="20" HorizontalAlignment="Right" Margin="10,100,10,0" Opacity="0"/>
</StackPanel>
</StackPanel>
StackPanels only give enough space to their child elements as the need. I would recommend the following:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<!-- Right most column -->
</StackPanel>
</Grid>
This was the stack panel stretches to fit the column.
How do I get the TextBlock in my status bar below to align to the right?
I've told it to:
HorizontalAlignment="Right"
TextAlignment="Right"
but the text is still sitting unobediently on the left. What else do I have to say?
<Window x:Class="TestEvents124.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300"
MaxWidth="700" Width="700"
>
<DockPanel HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="Auto">
<StatusBar Width="Auto" Height="25" Background="#888" DockPanel.Dock="Bottom" HorizontalAlignment="Stretch">
<TextBlock
Width="Auto"
Height="Auto"
Foreground="#fff"
Text="This is the footer."
HorizontalAlignment="Right"
TextAlignment="Right"
/>
</StatusBar>
<GroupBox DockPanel.Dock="Top" Height="Auto" Header="Main Content">
<WrapPanel Width="Auto" Height="Auto">
<TextBlock Width="Auto" Height="Auto" TextWrapping="Wrap" Padding="10">
This is an example of the content, it will be swapped out here.
</TextBlock>
</WrapPanel>
</GroupBox>
</DockPanel>
</Window>
I've had a play with your code and managed to make it look "right" (no pun intended) by using a StatusBarItem rather than a TextBlock:
<StatusBar Width="Auto" Height="25"
Background="#888" DockPanel.Dock="Bottom"
HorizontalAlignment="Stretch" >
<StatusBarItem Foreground="#fff"
HorizontalContentAlignment="Right">This is the footer</StatusBarItem>
</StatusBar>
Not sure what's happening with the TextBlock - all my experience says that some combination of HorizontalContentAlignment and HorizontalAlignment (on both the StatusBar and the TextBlock) should achieve what you want. Anyway - hopefully the StatusBarItem will work for you.
<StatusBar>
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem Grid.Column="0">
<TextBlock>something</TextBlock>
</StatusBarItem>
<Separator Grid.Column="1" />
<StatusBarItem Grid.Column="2">
<TextBlock>logged in</TextBlock>
</StatusBarItem>
</StatusBar>
This example won't mess up your Separator. Based on an example taken from http://kent-boogaart.com/blog/the-perfect-wpf-statusbar
You shouldn't put a Separator in a StatusBarItem, it will reduce your separator to a dot.
For anyone who is looking for the answer to the question in the title (not necessarily for use in a status bar), I found a Label to be better than a TextBlock for having control over alignment and still feeling semantically correct.
Seems this is still an issue. The problem is that a TextBlock's width is automatically set based on its content. To verify this just set the Background property to another color. Setting the HorizontalAlignment to Stretch doesn't help.
Fortunately, most of my properties are set in code (MVPVM) and my TextBlocks are contained in a Panel and I was able to set the TextBlock's width property to its Parent width. i.e tb.Width = tb.Parent.Width, then Right alignment worked.