I'm struggling to vertically center text using TextBlock. I know that it adds extra space above the space in case you use accents but why it isn't consistent with the space below then? There's a few extra pixels.
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,40,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockLocalScore" Text="0" FontFamily="Courier New" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<Grid Padding="4,8" BorderThickness="8,0" Width="104">
<TextBlock x:Name="TextBlockMinutesLeft" Text="00" HorizontalAlignment="Left" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" TextAlignment="Center" Height="27" TextLineBounds="Tight" Margin="0,0,4,0" />
<TextBlock x:Name="TextBlockSecondsLeft" Text="30" HorizontalAlignment="Right" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" />
</Grid>
<Grid Width="41" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockRemoteScore" Text="0" HorizontalAlignment="Center" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" Foreground="#FFFF3B30" />
</Grid>
</StackPanel>
I've played with Line Height and Text Line Bounds but I can't why a way to make the text still vertical centered once I change the font.
Updated code to reproduce issue:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,100,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
<Grid Width="51" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<StackPanel Padding="4" BorderThickness="8,0" Orientation="Horizontal">
<TextBlock Text="01" FontFamily="Courier New" FontSize="36" TextAlignment="Left" VerticalAlignment="Center" Margin="0,0,4,0" />
<TextBlock Text="11" FontFamily="Courier New" FontSize="36" TextAlignment="Right" VerticalAlignment="Center" />
</StackPanel>
<Grid Width="51" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
<TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</StackPanel>
You should have a play with these two properties. In your case you are probably more interested in TextLineBounds.
<TextBlock Text="80" FontSize="40" TextLineBounds="Tight" OpticalMarginAlignment="TrimSideBearings" />
Update
I am not sure if your screenshot is 100% accurate. I have used your code to produce the following pictures. Note I have scaled them up by 10 times.
<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockLocalScore" TextLineBounds="Full" Text="80" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Top" Width="1" Margin="-21,0,0,0" />
<Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Bottom" Width="1" Margin="-21,0,0,0" />
</Grid>
With TextLineBounds set to Tight
With TextLineBounds set to Full
Yes, on the first one, there's still a tiny little gap (about 0.3 epx) between the bottom edge of number 8 and the Line, but this is mostly due to layout rounding and effective pixel snapping. I don't think it's noticeable to human eyes. :)
P.S. You cannot purely rely on checking the visuals from Blend Designer as sometimes the artboard doesn't get updated on time to give you the correct result. You should always run your app and check from there.
I have tested your code and reproduced this behavior. If your have not set the height and width of TextBlock, it will set them based on your text font size automatically .
For example, If the FontFamily is Courier New and the font size is 25, and the actual width and height of TextBlock is 16.00244140625 , 29.3203125. It will generate deviation when you center the text vertically. However, you could manual correct it via modifying the Padding just like the follow
Related
I am trying to learn about adaptive UI. I use bootstrap alot, but am in the process of designing a Windows 10 app with xaml. I am wanting the textboxes and textbloxks to adjust based on if the user shrinks the window or not. This is what I have, but it is not adapting nor is it responsive.
<Grid Grid.Row="1">
<TextBlock HorizontalAlignment="Left" FontSize="24" Margin="10,22,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Title" VerticalAlignment="Top"/>
<TextBox x:Name="txtBoxTitle" Margin="79,24,0,0" Grid.Row="1" Width="800" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<TextBlock HorizontalAlignment="Left" FontSize="24" Margin="10,131,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Body" VerticalAlignment="Top"/>
<TextBox x:Name="txtBoxBody" Margin="79,133,-225,0" Grid.Row="1" Width="800" Height="500" TextWrapping="Wrap" AcceptsReturn="True" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button x:Name="btnSubmitArticle" Content="Submit" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="80,20,20,20" d:LayoutOverrides="Width"/>
</Grid>
Additional Question
How can I pull the text in the textbox all the way to the right of the window and have it respond correctly when the screen size changes.
<RelativePanel Margin="12,12">
<TextBlock x:Name="txtBoxDate"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
FontSize="14"
TextAlignment="Right"
TextWrapping="Wrap"
Text="Title" />
</RelativePanel>
Can anyone point me in the right direction to making these elements repsonsive depending on screen size?
Assuming that the whole row stretches, the problem is that you're setting Width of those elements (and some weird Margins, probably because you dragged and dropped the controls from the toolbox). You can use a RelativePanel to nicely stack the items and keep them stretched from left to right inside the panel:
<RelativePanel Margin="12,0">
<TextBlock x:Name="FirstTextBlock"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
FontSize="24"
TextWrapping="Wrap"
Text="Title" />
<TextBox x:Name="txtBoxTitle"
RelativePanel.Below="FirstTextBlock"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,8,0,0"
TextWrapping="Wrap" />
<TextBlock x:Name="SecondTextBlock"
RelativePanel.Below="txtBoxTitle"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
FontSize="24"
Margin="0,8,0,0"
TextWrapping="Wrap"
Text="Body" />
<TextBox x:Name="txtBoxBody"
RelativePanel.Below="SecondTextBlock"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,8,0,0"
Height="500"
TextWrapping="Wrap"
AcceptsReturn="True" />
<Button x:Name="btnSubmitArticle"
RelativePanel.Below="txtBoxBody"
Content="Submit"
Margin="0,8,0,0"
d:LayoutOverrides="Width"/>
</RelativePanel>
I want to add the TextBlock into the Button content. But if i add the TextBlock into the button content the TextBlock font style is changing.
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
<TextBlock Text="Vijaya dhas" FontSize="36" FontWeight="Black"/>
<TextBlock Text="Mobile App Developer Trainee" FontSize="26" FontWeight="SemiBold"/>
<TextBlock Text="Chennai" FontSize="24" FontWeight="Medium"/>
</StackPanel>
If i give like this my out put is:
If I give this into the button content:
<Button Height="200">
<Button.Content>
<StackPanel>
<TextBlock Text="Vijaya dhas" FontSize="36" FontWeight="Black"/>
<TextBlock Text="Mobile App Developer Trainee" FontSize="26" FontWeight="SemiBold"/>
<TextBlock Text="Chennai" FontSize="24" FontWeight="Medium"/>
</StackPanel>
</Button.Content>
</Button>
the out put is:
I don't want change the TextBlock font style. Please give any idea to keep the font style what ever it is.
Here i have attached my list box example for your review:
Without Using Button:
Using Button Content:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="List Example" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Example" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="2,0,2,0" Background="#FFE5E5E5">
<TextBlock Text="List Box With Button Content" Margin="0,150,0,0" FontSize="26" Foreground="Red" VerticalAlignment="Top" />
<ListBox HorizontalAlignment="Left" Margin="0,180,0,0" Name="listBox1" VerticalAlignment="Top" Width="480" ItemsSource="{Binding Content, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<Button BorderBrush="Transparent" Template="{x:Null}">
<Button.Content>
<Border Margin="0,0,0,0" BorderThickness="1" BorderBrush="Gray" Padding="1" Width="476">
<StackPanel Orientation="Horizontal">
<Border Height="110" Width="110" Margin="5,0,0,0" BorderThickness="1" BorderBrush="Black">
<StackPanel Height="110" Width="110" Background="White">
<Image Source="/NewExample;component/Images/Koala.jpg" Stretch="Fill" Width="100" Height="100" Margin="0,0,0,0"/>
<Image Source="{Binding ImageView}" Stretch="Fill" Width="110" Height="110" Margin="0,-100,0,0"/>
</StackPanel>
</Border>
<TextBlock Text="{Binding TitleView}" Height="30" Width="230" Foreground="Black" Margin="10,0,0,0" TextWrapping="Wrap" FontWeight="Medium" FontSize="24" VerticalAlignment="Top"/>
<TextBlock Text="{Binding Time}" Width="100" Foreground="Black" Margin="30,0,0,0" FontSize="18"/>
<TextBlock Text="{Binding TypeViews}" Width="250" Foreground="Black" Margin="-360,30,0,0" FontSize="18" FontWeight="Medium" HorizontalAlignment="Left" />
<TextBlock Text="{Binding TextContent}" MaxHeight="84" Width="270" TextWrapping="Wrap" Foreground="Black" Margin="-450,50,0,0" FontWeight="Black" FontSize="19" TextTrimming="WordEllipsis" />
<Image Source="{Binding TypeImageView}" Height="35" Width="35" Stretch="Fill" Margin="-120,10,0,0"/>
<Image Width="50" Height="50" Source="{Binding ClickButton}" Stretch="Fill" Margin="-60,10,0,0" Name="balloon_disclosure"/>
<TextBlock Text="{Binding TextView}" Width="250" Foreground="Black" Margin="-360,100,0,0" FontSize="20" FontWeight="Medium" HorizontalAlignment="Left" />
</StackPanel>
</Border>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
To Get rid of the button's default padding, margin and styles etc, set its template to "{x:Null}"
<Button Height="200" Template="{x:Null}">
<Button.Content>
<StackPanel>
<TextBlock Text="Vijaya dhas" FontSize="36" FontWeight="Black"/>
<TextBlock Text="Mobile App Developer Trainee" FontSize="26" FontWeight="SemiBold"/>
<TextBlock Text="Chennai" FontSize="24" FontWeight="Medium"/>
</StackPanel>
</Button.Content>
</Button>
I just implemented a GridView with groups feature. I have a list of TVshows's episodes which are grouped by diffusion date.
When I have more than 3 episodes by date, I want to have my items wrapped and go next to the group title, at this time, the next items are going outside of the screen, and it not what I wanted.
As you can see, there is other episodes under the dupplicated one for each day, I want them to go next to the others, not under.
Here is my XAML code, thanks :)
<GridView Margin="70,0,0,40" ItemsSource="{Binding Source={StaticResource cvsActivities}}">
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
<GridView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="True" />
<RepositionThemeTransition />
<AddDeleteThemeTransition />
</TransitionCollection>
</GridView.ItemContainerTransitions>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Vertical">
<Grid Name="grid_image">
<Image Width="280" Height="200" VerticalAlignment="Center" Stretch="UniformToFill" Source="Assets/no_image.png" />
<Image Width="280" Height="200" VerticalAlignment="Center" Stretch="UniformToFill" Source="{Binding saison.serie.poster}" />
</Grid>
<Image Source="Assets/Ban-1hh.png" Width="280" Height="59" Margin="0,-19,0,0"/>
<Grid Margin="0,-40,0,0" Height="40">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical" VerticalAlignment="Center" Margin="0,-7,0,0">
<TextBlock HorizontalAlignment="Left" Margin="5,0,0,0" Width="190" TextTrimming="WordEllipsis" Foreground="White" FontSize="20" Text="{Binding saison.serie.nom}" />
<TextBlock HorizontalAlignment="Left" Margin="5,-5,0,0" Width="190" TextTrimming="WordEllipsis" Foreground="White" FontSize="13" Text="{Binding date}" />
</StackPanel>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Right" Orientation="Vertical" Margin="0,-5,5,0">
<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
<TextBlock Foreground="#f0ec45" FontSize="14" Text="{Binding saison.number}" />
<TextBlock Foreground="#f0ec45" FontSize="14" Margin="5,0,0,0" Text="Saison " />
</StackPanel>
<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft" Margin="0,-5,0,0">
<TextBlock Foreground="#f0ec45" FontSize="14" Text="{Binding ep_number}" />
<TextBlock Foreground="#f0ec45" FontSize="14" Margin="5,0,0,0" Text="Episode " />
</StackPanel>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="LightGray" >
<TextBlock Text="{Binding Key, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:dddd dd MMM yy}'}" Foreground="Black" Margin="10"
Style="{StaticResource PageSubheaderTextStyle}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Add a ItemsPanelTemplate (if you take a look at the default GridApp and the GroupedItemsPage.xaml, you'll see this is how they do it).
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
If you want the 3rd element in a column to leak over the bottom, then you can set a negative bottom margin on the GridView itself.
You virtually erased the GridView control template, so no wonder it doesn't work. Remove the following part and things might get back to normal:
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
If there is something you want changed in the default template - change that specific thing. The default template has a horizontal ScrollViewer which limits vertical space use by the WrapGrid that is used for its ItemsPanelTemplate and allows items to wrap to next column, while also allowing to scroll horizontally to see all items.
I'm going through the Windows 8 Bing Translator Walkthrough
I was able to follow everything except the XAML part. I'm very new to XAML. Below is what the walkthrough appears to recommend, however VS2012 indicated the markup is invalid, and the error displayed says "the property "content" is set more than once". Is this the only issue? Where this is set more than once?
<GridView ItemTemplate="{StaticResource TweetTemplate}" SelectionMode="None" ItemsSource="{Binding tweets}"></GridView>
<DataTemplate x:Key="TweetTemplate">
<Grid>
<Rectangle Fill="#FFDA713F" HorizontalAlignment="Left" Height="115" Margin="10,11,0,0"
VerticalAlignment="Top" Width="455" RadiusX="20" RadiusY="20"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="50"
Margin="176,12,0,0" TextWrapping="Wrap" x:Name="txtTweet"
Text="{Binding Title}" VerticalAlignment="Top" Width="277" FontSize="12"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="50"
Margin="176,72,0,0" TextWrapping="Wrap" x:Name="txtTrans"
Text="{Binding translatedText}" VerticalAlignment="Top" Width="277"
FontSize="12"/>
<Image Source="{Binding ImageUri}" HorizontalAlignment="Left" Height="89"
Margin="20,20,0,0" VerticalAlignment="Top" Width="116"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="17"
Margin="24,109,0,0" TextWrapping="Wrap" Text="{Binding Author}"
VerticalAlignment="Top" Width="150" FontSize="10"/>
</Grid>
</DataTemplate>
...and no sooner do I post the question, I find the answer. the above needs to be arranged as follows:
Note that from the example in the link provided above the author used RefreshAppBarButtonStyle. This was changed to AppBarButtonStyle. I;m not sure I fully understand the xaml page yet, but at least I have a working framework to diagnose.
<Page.Resources>
<DataTemplate x:Key="TweetTemplate">
<Grid>
<Rectangle Fill="#FFDA713F" HorizontalAlignment="Left" Height="115" Margin="10,11,0,0" VerticalAlignment="Top" Width="455" RadiusX="20" RadiusY="20"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="50" Margin="176,12,0,0" TextWrapping="Wrap" x:Name="txtTweet" Text="{Binding Title}" VerticalAlignment="Top" Width="277" FontSize="12"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="50" Margin="176,72,0,0" TextWrapping="Wrap" x:Name="txtTrans" Text="{Binding translatedText}" VerticalAlignment="Top" Width="277" FontSize="12"/>
<Image Source="{Binding ImageUri}" HorizontalAlignment="Left" Height="89" Margin="20,20,0,0" VerticalAlignment="Top" Width="116"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="17" Margin="24,109,0,0" TextWrapping="Wrap" Text="{Binding Author}" VerticalAlignment="Top" Width="150" FontSize="10"/>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<GridView ItemTemplate="{StaticResource TweetTemplate}" SelectionMode="None" ItemsSource="{Binding tweets}"></GridView>
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock x:Name="txtPrompt" Text="Search Term: " Height="24" FontSize="24"></TextBlock>
<TextBox x:Name="txtSearchTerm" Width="300" Height="24"></TextBox>
<Button Style="{StaticResource AppBarButtonStyle}" Click="Button_Click_1" />
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
Hope this is also of use to someone else.
Paul
I'm trying to give some images (of different sizes) the same dimensions. All my images should be 90x258 (w*h), but somehow I can't get this working.
This is my code:
<StackPanel Orientation="Horizontal">
<Border BorderThickness="4,0,0,0" BorderBrush="BlanchedAlmond">
<Image x:Name="Image" Source="{Binding Image}" Width="90" Height="258" />
</Border>
<StackPanel Orientation="Vertical" Width="164">
<TextBlock TextWrapping="Wrap" Style="{StaticResource ItemTextStyle}" Text="{Binding Title}" Margin="10,0"/>
<TextBlock TextWrapping="Wrap" Style="{StaticResource CaptionTextStyle}" Text="{Binding Authors}" Margin="10"/>
</StackPanel>
</StackPanel>
I played around with the Stretch property of my image but no matter what I select, the image will not be 90x258.
When using the default Uniform stretch it maintains the aspect ratio (I don't want that), when I choose None the image is shown in its original dimensions and UniformToFill and Fill will make the image so large that only a small part of it is actually shown in the image container.
Here's an example:
I want it to show the full cover of the book, in 90x258:
Can anyone help me please?
Try settings the height to auto and the stretch to Fill
<StackPanel Orientation="Horizontal">
<Border BorderThickness="4,0,0,0" BorderBrush="DodgerBlue">
<Image x:Name="Image" Source="{Binding Image}" HorizontalAlignment="Left" Width="94" Stretch="Fill" />
</Border>
<StackPanel Orientation="Vertical" Width="164">
<TextBlock TextWrapping="Wrap" Style="{StaticResource ItemTextStyle}" Text="{Binding Title}" Margin="10,0"/>
<TextBlock TextWrapping="Wrap" Style="{StaticResource CaptionTextStyle}" Text="{Binding Authors}" Margin="10"/>
</StackPanel>
</StackPanel>