Forms & UWP - how ready is it? Custom Renderer examples available?

PhilipOGormanPhilipOGorman USMember ✭✭✭

I've been using forms with Android and IOS and have been pretty successful so far. I'm starting a new app that also requires UWP.
I've put together a sample app with simple buttons in a grid. I've used styles in the App.xaml :

`

  <Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="FontSize" Value="Large"/>
    <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
    <Setter Property="VerticalOptions" Value="FillAndExpand"/>
    <Setter Property="TextColor" Value="White"/>
    <Setter Property="BorderColor" Value="#545454"/>
    <Setter Property="BackgroundColor" Value="#545454"/>
    <Setter Property="BorderRadius" Value="10"/>
    <Setter Property="BorderWidth" Value="5"/>
    <Style.Triggers>
      <Trigger Property="IsEnabled" Value="False" TargetType="Button">
        <Setter Property="BackgroundColor" Value="#5513007a"/>
      </Trigger>
    </Style.Triggers>
  </Style>
  <Style x:Key="LabelLargeBoldStyle" TargetType="Label">
    <Setter Property="TextColor" Value="White"/>
    <Setter Property="FontSize" Value="Large"/>
    <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
    <Setter Property="VerticalOptions" Value="FillAndExpand"/>
  </Style>
</ResourceDictionary>`

One thing that doesn't work on UWP is the rounded buttons. It this a bug or just not supported?
Also - if I want change the look and feel of controls in need to use custom renderer. I've done this on IOS & Android, but I dont know where to start on UWP, are there Custom Renderer examples available?

Overall how ready is Forms for UWP?

Thanks!

Posts

  • MJoehlMJoehl USMember ✭✭

    Hi. DId you find some examples? Can you show me?
    I am stuck with the UWP and Xamarin.Forms by creating a PageRenderer.

    Thanks

  • PhilipOGormanPhilipOGorman USMember ✭✭✭

    @MichaelJhl I didn't find many examples - we made some renderers though - Frame, Tab and Button.

    What do you want to do?

  • MJoehlMJoehl USMember ✭✭

    @PhilipOGorman I want to change the Color of the ActionBar on top and the CommandBar. But I can't find a suitable property from the type Windows.UI.Xaml.Controls.Page so that I can Access the UWP-Page-Properties directly... or miss I just something?

  • PhilipOGormanPhilipOGorman USMember ✭✭✭

    I give some expamples of what I have done in other controls - maybe it will help:

    Rounded Button
    ` [assembly: ExportRenderer(typeof(RoundedButton), typeof(CustomButtonRenderer))]
    namespace SmartCart.UWP.Renderers
    {
    public class CustomButtonRenderer : ButtonRenderer
    {

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);
            var button = (RoundedButton)e.NewElement;
            if (Control != null)
            {
                button.SizeChanged += OnSizeChanged;
            }
    
        }
        private void OnSizeChanged(object sender, EventArgs e)
        {
            var button = (RoundedButton)sender;
            var color = button.UWPBackground;
            Control.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(
                (byte)(color.A * 255), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255)));
            Control.Style = (Style)Application.Current.Resources["RoundedButtonStyle"];
            button.SizeChanged -= OnSizeChanged;
        }
    
    
    }`
    

    ` <Application.Resources>

        <local:ColourBrushToLighter x:Name="ColourBrushToLighter" />
    
        <Style TargetType="Button" x:Key="RoundedButtonStyle">
            <!--<Setter Property="Background" Value="Blue" />-->
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
            <Setter Property="Padding" Value="8,4,8,4" />
            <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="UseSystemFocusVisuals" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" CornerRadius="6">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                                   Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource ColourBrushToLighter}}" />
                                            </ObjectAnimationUsingKeyFrames>-->
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border"
                                                   Storyboard.TargetProperty="Opacity">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0.3" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                                   Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="ContentPresenter"
                                              BorderBrush="{TemplateBinding BorderBrush}"
                                              BorderThickness="{TemplateBinding BorderThickness}"
                                              Content="{TemplateBinding Content}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Padding="{TemplateBinding Padding}"
                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                              AutomationProperties.AccessibilityView="Raw"
                                              CornerRadius="6"/>
                            <Border x:Name="border" CornerRadius="6" Background="White" Opacity="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
    
    
    
    </Application.Resources>`
    
  • PhilipOGormanPhilipOGorman USMember ✭✭✭

    Frame Renderer

    ` [assembly: ExportRenderer(typeof(Xamarin.Forms.Frame), typeof(CustomFrameRenderer))]
    namespace SmartCart.UWP.Renderers
    {
    public class CustomFrameRenderer : FrameRenderer
    {

            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Frame> e)
            {
                base.OnElementChanged(e);
                var frame = e.NewElement;
                var color = frame.BackgroundColor;
                frame.BackgroundColor = Xamarin.Forms.Color.Transparent;
                Control.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(
                    (byte)(color.A*255), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255)));
            }
    
        }
    }`
    
  • PhilipOGormanPhilipOGorman USMember ✭✭✭

    Tabbed Page

    `[assembly: ExportRenderer(typeof(FreshTabbedNavigationContainer), typeof(CustomTabRenderer))]

    namespace SmartCart.UWP.Renderers
    {
    public class CustomTabRenderer : TabbedPageRenderer
    {
    public CustomTabRenderer()
    {
    this.ElementChanged += CustomTabRenderer_ElementChanged;

        }
    
        private void CustomTabRenderer_ElementChanged(object sender, VisualElementChangedEventArgs e)
        {
            Control.HeaderTemplate = GetStyledTitleTemplate();
        }
    
        private Windows.UI.Xaml.DataTemplate GetStyledTitleTemplate()
        {
            string dataTemplateXaml = @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
                xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
                    <TextBlock
                        Text=""{Binding Title}""
                        FontFamily=""/Assets/Fonts/museosans-500.ttf#museosans-500""
                        FontSize =""25"" />
                      </DataTemplate>";
    
            return (Windows.UI.Xaml.DataTemplate)XamlReader.Load(dataTemplateXaml);
        }
    }
    

    }`

  • LuiginoDeTogniLuiginoDeTogni USMember ✭✭

    "* 255" solved my day :smile:

Sign In or Register to comment.