Vertically align BoxView in Grid cell - xaml

With the following layout and styles, the BoxView isn't vertically centered such that it's aligned with the label. How do I achieve this?
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" BackgroundColor="Red"></BoxView>
<Label Grid.Column="1" x:Name="lbl1"/>
</Grid>
<Style TargetType="BoxView">
<Setter Property="WidthRequest" Value="10" />
<Setter Property="HeightRequest" Value="10" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="HorizontalOptions" Value="Center" />
</Style>
<Style TargetType="Label">
<Setter Property="FontSize" Value="12" />
<Setter Property="YAlign" Value="Center" />
</Style>
Setting VerticalOptions to Start or End has the box flush against the top or bottom respectively. So, it doesn't seem to be doing central alignment correctly.

Use CenterAndExpand instead
<Style TargetType="BoxView">
<Setter Property="WidthRequest" Value="10" />
<Setter Property="HeightRequest" Value="10" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="HorizontalOptions" Value="Center" />
</Style>
Update: Here's a very good explanation of the difference.
Hope this helps.-

1) Try to add an explicit RowDefinition and its height;
2) Try adjust the label's FontSize to the BoxView size;
Or a dirty hack: you can add a top margin to the BoxView.

You need to use this on the Label too:
<Setter Property="VerticalOptions" Value="Center" />
Your code is just aligning the text position inside the label, not the position of the label itself.

When fighting text not aligning vertically:
Try the following: set for label
VerticalOptions="Fill"
VerticalTextAlignment="Center"
Consider a case when your elements are vertically aligned but do not seem so because of font creator settings, font adding more space to bottom or top breaking alignment. This can be solved a custom renderers system or by a silly
TranslationY="1"
or "-0.5" whatever..

Related

Xamarin, xaml titleview with centered title with buttons

I'm trying to create a TitleView where the navigation title is centered in the middle of the screen. But have buttons on either or both sides.
(I recently found posts saying it was best to add buttons to the TitleView rather than ContentPage.ToolbarItem as we couldn't changes the colour of the text.)
Instead we opted for fixed width buttons / spacers, so we could have a middle label for the title which would be centered. You can see the result below, unforunetly I'm going to have to increased the size of the button for longer text. We also support several languages so the text could be longer still.
Here's the xaml
<NavigationPage.TitleView>
<StackLayout Style="{StaticResource TitleViewStackLayout}">
<Label Style="{StaticResource TitleViewSpacer}"
HorizontalOptions="Start" />
<Label Text="{tran:Translate Contact_ConfirmEmail}"
Style="{StaticResource TitleViewLabel}" />
<Button Style="{StaticResource TitleViewButton}"
HorizontalOptions="End"
Text="{tran:Translate Common_Restart}"
Command="{Binding ToolbarItemRestartCommand}"/>
</StackLayout>
</NavigationPage.TitleView>
And here's our style...
<Style x:Key="TitleViewStackLayout" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style x:Key="TitleViewLabel" TargetType="Label">
<Setter Property="TextColor" Value="{DynamicResource White}" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="HorizontalOptions" Value="CenterAndExpand" />
<Setter Property="FontSize" Value="{DynamicResource Title}" />
</Style>
<OnPlatform x:Key="TitleViewItemMargin" x:TypeArguments="Thickness" Android="10,0,10,0" iOS="0" />
<OnPlatform x:Key="TitleViewItemWidth" x:TypeArguments="x:Double" Android="60" iOS="50" />
<Style x:Key="TitleViewButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
<Setter Property="TextColor" Value="{DynamicResource White}" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="Margin" Value="{DynamicResource TitleViewItemMargin}" />
<Setter Property="WidthRequest" Value="{DynamicResource TitleViewItemWidth}" />
<Setter Property="FontSize" Value="16" />
</Style>
<Style x:Key="TitleViewSpacer" TargetType="Label">
<Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
<Setter Property="TextColor" Value="{DynamicResource White}" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="Margin" Value="{DynamicResource TitleViewItemMargin}" />
<Setter Property="WidthRequest" Value="{DynamicResource TitleViewItemWidth}" />
<Setter Property="FontSize" Value="16" />
</Style>
I did think about using a grid, I know could also add three columns all with Grid.Column="0".. but I'd then have the possibility of a long title which would overlap the buttons. We do have some long titles. I guess I would need to be able to set a max width and add LineBreakMode="TailTruncation"
Xamarin Forms - center title in a stacklayout
I did think about repeating the text but transparent to achieve equal widths, but this wouldn't cater for 2 different buttons.
As you said , it could be better to use Grid instead of StackLayout .
In your case , you could set the width of three columns as a fixed percentage value. In this way , since the Text of Label is a long value , it will never cover the right Button .
<NavigationPage.TitleView>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.6*"/>
<ColumnDefinition Width="0.2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0"
Text="Back"
MaxLines="1"
Style="{StaticResource TitleViewSpacer}"
HorizontalOptions="Start" />
<Label Grid.Column="1" Text="Email Confirm Email Confirm Email Confirm Email Confirm Email Confirm"
MaxLines="1"
LineBreakMode="TailTruncation" // you could set it or not , both are OK ,it's up to you
Style="{StaticResource TitleViewLabel}" />
<Button Grid.Column="2" Style="{StaticResource TitleViewButton}"
HorizontalOptions="EndAndExpand"
Text="Restart"
WidthRequest="80"
Command="{Binding ToolbarItemRestartCommand}"/>
</Grid>
</NavigationPage.TitleView>

How to change AppBarButton's style of MediaPlayerElement on xbox?

As the picture shows, I want to change MediaPlayerElement's AppBarButton style, something like:
Button size, 2x is the best.
Remove default focus reveal border.
Change the Button to a circle, not rectangle.
When a button is focused, change it's background color.
I have followed the advice of https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/custom-transport-controls, but found no idea.
Set CornerRadius will result
In the default style of MediaTransportControls, there is such a snippet:
<!-- New AppBar button style 48x48 pixels in size -->
<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonRevealStyle}">
<Setter Property="Width" Value="{ThemeResource MTCMediaButtonWidth}" />
<Setter Property="Height" Value="{ThemeResource MTCMediaButtonHeight}" />
<Setter Property="AllowFocusOnInteraction" Value="True" />
</Style>
If you want a round button, you can modify it like this
<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonRevealStyle}">
<Setter Property="Width" Value="40" />
<Setter Property="Height" Value="40" />
<Setter Property="AllowFocusOnInteraction" Value="True" />
<Setter Property="CornerRadius" Value="20" />
</Style>
If you need to modify more styles, you need to create a copy of the style of the AppBarButton to adjust.
Because the default style code of MediaTransportControls is very large, I put the code of the default style here (which also includes the code of AppBarButtonRevealStyle), you can modify it according to your needs.
Update
AppBarButton has its own internal height. If special handling is needed, you must first rewrite the style of AppBarButton
The main display content of AppBarButton is an Icon. In the default style, it is in the ViewBox. We can rewrite its height according to our needs.
You can find the modified code here
<Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}" Margin="-1,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Viewbox x:Name="ContentViewbox"
Height="25"
VerticalAlignment="Center"
Margin="0"
HorizontalAlignment="Stretch"
AutomationProperties.AccessibilityView="Raw" >
<ContentPresenter x:Name="Content"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}"/>
</Viewbox>
...
</Grid>
After modifying the code of AppBarButton, we also need to modify some styles of MediaTransportControls
<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonRevealStyle}">
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Setter Property="CornerRadius" Value="40" />
<Setter Property="AllowFocusOnInteraction" Value="True" />
</Style>
<!-- New CommandBar Style -->
<Style x:Key="CommandBarStyle" TargetType="CommandBar">
<Setter Property="Height" Value="90" />
<Setter Property="Background" Value="Transparent" />
</Style>
You can finally get this effect:
Best regards.

Xamarin Forms Round Button

I'm using Xamarin Forms 4.1.0.581479 and the same version of Xamarin Forms Visual Material.
I've made a round button that I'm using as a close button for a couple of modal overlays. It looks like this:
The problem is that I can't make the x in the middle (from the Material icon font) larger. Currently it has a font size of 20
As soon as I start to increase the font size, e.g. to 30, this starts to happen:
I've tried setting the Padding of the button to zero, I've tried playing with the HorizontalOption, I've tried setting BorderWidth to 0, but nothing seems to make any difference.
How do I increase the font-size without clipping the icon?
As requested, here is my XAML:
<Button Grid.Column="1" Text="{x:Static constants:IconFont.Close}" Clicked="OnClicked" Style="{StaticResource CloseButton}" />
The CloseButton style is as follows:
<Style x:Key="CloseButton" TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource MaterialFontFamily}" />
<Setter Property="BackgroundColor" Value="#0075BE" />
<Setter Property="FontSize" Value="20" />
<Setter Property="WidthRequest" Value="50" />
<Setter Property="HeightRequest" Value="50" />
<Setter Property="HorizontalOptions" Value="End" />
<Setter Property="BorderRadius" Value="25" />
</Style>
I think you should use ImageButton instead of Button:
<ImageButton VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="AliceBlue" CornerRadius="25" WidthRequest="50" HeightRequest="50">
<ImageButton.Source>
<FontImageSource
FontFamily="{DynamicResource MaterialFontFamily}"
Glyph="{DynamicResource IconClose}"
Size="30"
Color="Red" />
</ImageButton.Source>
</ImageButton>

XAML Make stackpanel slightly transparent but the text inside not

I have a stackpanel which i fill with an textblock. I have an stackpanel.resources. I tried setting the background to transparent but it will make the whole style invisible (but the text not) and i tried using opacity. This does make my stackpanel slightly transparent but also the text within the stackpanel.
The stackpanel looks like this:
<StackPanel Orientation="Vertical" Margin="550,25,0,0">
<Border>
<TextBlock OpticalMarginAlignment="None">
<Run FontSize="24" Text="Product"></Run><LineBreak/>
<Run FontSize="18" Text="Artikelnummer: "></Run><LineBreak/>
<Run FontSize="18" Text="Omschrijving: "></Run><LineBreak/>
<Run FontSize="18" Text="Eenheid: "></Run>
</TextBlock>
</Border>
<StackPanel.Resources>
<Style TargetType="Border">
<Setter Property="Background" Value="#287d37" />
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="400" />
<Setter Property="Height" Value="105" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="5" />
</Style>
</StackPanel.Resources>
</StackPanel>
Does anyone know how i can achieve my goal of setting the background of the stackpanel to something like opacity 0.25 but the text inside that stackpanel not?
Thanks in advance!
Specify the alpha channel (the first byte) in the case of hardcoded colors, or the opacity if you're using a brush:
<StackPanel Background="#44287d37">
...
</StackPanel>
or
<StackPanel>
<StackPanel.Background>
<SolidColorBrush Color="Blue" Opacity=".25"/>
</StackPanel.Background>
...
</StackPanel>

Viewbox and border

I am writing a Store app with XAML and C#. I want to use Border and ViewBox. I got border styled, so I do not have to set properties that many times. I set BorderThickness to 2, and color to White, but this causes problems in my Viewbox.
Here it is in XAML:
<Viewbox Grid.Row="1" Stretch="Uniform">
<Grid Width="600" Height="600">
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="2" />
</Style>
<Style TargetType="Grid">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="150" />
</Style>
</Grid.Resources>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Grid>
<Border>
<Viewbox>
<TextBlock Text="T" />
</Viewbox>
</Border>
</Grid>
The result of this is:
The problem is the scaled border around the letter "T".
I do not want to remove above styling for Border in Grid.Resources. I found only one solution so far...
<Viewbox>
<Viewbox.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</Viewbox.Resources>
<TextBlock Text="T" />
... what would give correct result:
, but I do not want to put these lines after each ViewBoxes, because there will be many.
I also tried to make a component, what has this default "resource" of zero thick border, but that had bad scaling.
So my question is how to to remove that border?
You're right to use the zero value for BorderThickness. There just might be another element in the visual tree hierarchy that also holds a default value that causes this.
I can't test this right now, but I can recommend this tool to you:
http://blois.us/Snoop/
You can inspect the visual tree with this by dragging the crosshair above your running debug application. Every time I stumbled upon a problem like this I found it highly useful to see which controls really appear at runtime, because with xaml it can be really tough to know it all. Hope you can find it!