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>
Related
I have in my code several times this code
<Image
Aspect="AspectFit"
HeightRequest="75"
WidthRequest="75">
<Image.Clip>
<EllipseGeometry
Center="37.5,37.5"
RadiusX="37.5"
RadiusY="37.5" />
</Image.Clip>
</Image>
And I want to extract it as a XAML Style to reuse and reduce the code
It would look something like this
<Style TargetType="Image" ApplyToDerivedTypes="True" x:Key="roundedImageStyle">
<Setter Property="HeightRequest" Value="75"/>
<Setter Property="WidthRequest" Value="75"/>
<Setter Property="Aspect" Value="AspectFit"/>
<Setter Property="Clip" Value="??????"/>
</Style>
How can I set the Clip inside the style?
#jfversluis told me that it can be achieved like this
<Setter Property="Clip">
<EllipseGeometry
Center="37.5,37.5"
RadiusX="37.5"
RadiusY="37.5" />
</Setter>
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.
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..
How can I display a textbox beside a button like in this picture?
A Flyout would be suitable here.
<Button Content="Edit">
<Button.Flyout>
<Flyout Placement="Right">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
</Flyout.FlyoutPresenterStyle>
<TextBox Width="250" Height="100" TextWrapping="Wrap"/>
</Flyout>
</Button.Flyout>
</Button>
Play around with the styles to get the appearance you want.
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!