Display long text inside Circular Button Completely - xamarin.forms

Am trying to create a Circular Button with Long Text inside it using Xamarin Forms. however on UWP platform if the text is longer than say 6 chars its Not visible completely.
How can i make the text fit to Width and Height inside the button.
Below is the Problem depicted .
in 3rd Button the Figure 100000 is cut at extreme right.
After increasing font size below is the Rendered UI.
The above has increased the font size however the text is cut off at corners.
FYI : Am using below Styles only on UWP to render button, is there any thing am doing wrong here? or how can i remove radius of textblock using this style?
<Style x:Name="MyControl" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border"
Background="White"
CornerRadius="50"
Width="110"
Padding="0"
Margin="0"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False"
TextWrapping="Wrap">
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How can i make the text fit to Width and Height inside the button.
Xamarin button has FontSize property. You could set suitable double value for displaying all text.
<Button HeightRequest="60" WidthRequest="60"
BorderRadius="30"
VerticalOptions="Center"
BorderColor="Green"
BorderWidth="5"
HorizontalOptions="Center"
Text="100000"
BackgroundColor="Transparent"
FontSize="10"/>
It looks correct in my side.
If you want avoid click animation, Please copy the following FormsButton style that is removed PointerOver and Pressed storyboard to UWP Application Resource directly.
xmlns:forms="using:Xamarin.Forms.Platform.UWP"
<Style TargetType="forms:FormsButton">
<Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
<Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
<Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="FocusVisualMargin" Value="-3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="forms:FormsButton">
<ContentPresenter
x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Related

How to Remove mouse hover effect in ListView Items Xamarin Forms UWP?

Want to remove mouse hover color on listview item in Xamarin forms UWP
how to do that?
You can modify listViewItem PointerOverBackground: as Transparent in UWP project App.xaml
<Application
x:Class="xxx.UWP.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:xxx.UWP"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="ItemStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="True" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
CheckMode="Inline"
ContentMargin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="Transparent"
PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"
SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
SelectionCheckMarkVisualEnabled="True" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
And apply it in CustomRenderer
[assembly: ExportRenderer(typeof(Xamarin.Forms.ListView), typeof(CustomListViewRenderer))]
namespace xxx.UWP
{
public class CustomListViewRenderer : ListViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
{
base.OnElementChanged(e);
if (Control != null)
{
List.ItemContainerStyle = App.Current.Resources["ItemStyle"] as Windows.UI.Xaml.Style;
}
}
}
}

Make StackLayout transparent so the WebView behind can be seen

I am using Visual Studio 2017, the project is a cross-platform Xamarin Forms mobile app, version 4.0
I would like to add a transparent StackLayout (Footer) that contains a non transparent button on top of a StackLayout that contains a webview.
I am trying to achieve this:
As you can see the bottom StackLayout (Footer) has an opacity of 0.9 and the WebView behind can still be seen.
I have tried this way:
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="WebView" TargetType="{x:Type WebView}">
<Setter Property="VerticalOptions" Value="Fill"></Setter>
<Setter Property="HeightRequest" Value="1000"></Setter>
<Setter Property="WidthRequest" Value="1000"></Setter>
</Style>
<Style x:Key="Footer" TargetType="{x:Type StackLayout}">
<Setter Property="BackgroundColor" Value="{x:StaticResource BlackColor}"/>
<Setter Property="VerticalOptions" Value="End"/>
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="Opacity" Value="0.9"></Setter>
</Style>
<Style x:Key="AcceptButton" TargetType="{x:Type Button}">
<Setter Property="BackgroundColor" Value="{x:StaticResource YellowColor}"/>
<Setter Property="TextColor" Value="{x:StaticResource BlackColor}"/>
<Setter Property="WidthRequest" Value="125" />
<Setter Property="BorderRadius" Value="15" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="HorizontalOptions" Value="CenterAndExpand" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<WebView Style="{StaticResource WebView}" Source="{Binding Url}"></WebView>
</StackLayout>
<StackLayout Style="{StaticResource Footer}">
<Button Text="{x:Static resources:AppLocalization.Term_Accept}" Style="{StaticResource AcceptButton}"></Button>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
But the Footer is all black and the WebView behind cannot be seen.
You guys have any ideas on how to handle this?
Thank you very much!
You want to overlay items, so it would be better to use a Grid
<ContentPage.Content>
<Grid>
<StackLayout VerticalOptions="CenterAndExpand">
<WebView Style="{StaticResource WebView}" Source="{Binding Url}"></WebView>
</StackLayout>
<StackLayout VerticalOptions="End" Style="{StaticResource Footer}">
<Button Text="{x:Static resources:AppLocalization.Term_Accept}" Style="{StaticResource AcceptButton}"></Button>
</StackLayout>
</Grid>
</ContentPage.Content>

Xamarin - Adding to Dark/Light themes

In my App.xaml I have the following (just an example):
<Style Class="Banner" TargetType="Label">
<Setter Property="TextColor" Value="#00ff00" />
<Setter Property="BackgroundColor" Value="#0000ff" />
<Setter Property="FontSize" Value="30" />
</Style>
This works fine with:
<Label StyleClass="Banner" Text="Hello" />
But, if I use one of the Dark/Light themes, the "Banner" StyleClass is ignored. I was hoping that the StyleClass's I created would add to those of the theme.
I want to be able to 'enhance' the themes, is this possible?
I have manged to get this working. In my App.xaml I have...
<!-- Enhancements to the Dark theme -->
<ResourceDictionary x:Name="EnhancedDark">
<Style Class="Banner" TargetType="Label">
<Setter Property="TextColor" Value="#000000" />
<Setter Property="BackgroundColor" Value="#ffffff" />
<Setter Property="FontSize" Value="Large" />
</Style>
...
</ResourceDictionary>
<!-- Enhancements to the Light theme -->
<ResourceDictionary x:Name="EnhancedLight">
<Style Class="Banner" TargetType="Label">
<Setter Property="TextColor" Value="#ffffff" />
<Setter Property="BackgroundColor" Value="#000000" />
<Setter Property="FontSize" Value="Large" />
</Style>
...
</ResourceDictionary>
Then in my app.cs to set the Dark theme with enhancements I have
Resources.MergedDictionaries.Add(new DarkThemeResources());
Resources.MergedDictionaries.Add(EnhancedDark); // Important
Resources.MergedDictionaries.Remove(EnhancedLight); // Important
And similarly for Light. Now in my code I can:
<Label StyleClass="Banner" ... />

How To: Align Button Text, and Icon

I want to left justify the Button Text and Icon. How can this be done? Preferable without creating a custom control renderer for each target platform.
I've used the Button's ContentLayout property to position the Icon to the Left of the Text, but the Button does not have a HorizontalTextAlignment property.
XAML - Snippet
<StackLayout.Resources>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="Padding" Value="5" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="BackgroundColor" Value="DodgerBlue"/>
<Setter Property="TextColor" Value="White" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="FontAttributes" Value="Bold"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="BorderWidth" Value="2"/>
<Setter Property="BorderRadius" Value="10"/>
<Setter Property="BorderColor" Value="LawnGreen"/>
<Setter Property="ContentLayout" Value="Left,5" />
</Style>
</StackLayout.Resources>
<Button Command="{Binding NavigateCommand}" Style="{DynamicResource buttonStyle}"
CommandParameter="MainPage"
Text="Lock"
Image="locked.png"/>
I would expect the Icon, and Text to be left justified, but the default behavior his Center justification.

Remove background color of button pressed and replace with image in Windows Phone 8.1

I got a Windows Phone 8.1 RT app.
I have a button with image like so:
<Button BorderThickness="0" Name="btn1" Grid.Row="1" Grid.Column="0" Width="75" Height="75" HorizontalAlignment="Center" FontFamily="Global User Interface" >
<Button.Background >
<ImageBrush ImageSource="ms-appx:///Images/1.png" Stretch="Uniform"/>
</Button.Background>
</Button>
When this button is pressed a horrible blue background color manifests itself.
I would like to remove this colour completely (and any other color) and change the pressed image of this button.
All the samples I have seen refers to SilverLight. Does anyone know how or where I can look to change this for RT apps?
This 'horrible' blue background comes with default button style. If you take a look at it:
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontWeight" Value="{ThemeResource PhoneButtonFontWeight}"/>
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
<Setter Property="Padding" Value="{ThemeResource PhoneButtonContentPadding}"/>
<Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/>
<Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="Grid" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="PointerOver">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="PointerOver" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{ThemeResource PhoneTouchTargetOverhang}">
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
you will find those lines, which produce this unwanted effect:
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Grid"/> <!-- leave this -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
disable them (apart PointerDownThemeAnimation, which produces nice animation when button is pressed) and the VisualStateMenager won't change the background anymore.

Resources