using Xamarin.Forms Previewer, create a color palette view to see all app colors

DanVanderboomDanVanderboom Dan VanderboomUSUniversity ✭✭

With Xamarin.Forms Previewer, I've found it useful to create a color-palette view to display all the app's colors. This view doesn't need to be loaded during runtime. It's just handy to have a visual color palette while designing your app's style(s).

I created a Grid with two columns and however many rows. A tablet view (in Previewer) can be used if/when you have a large color palette. I set GridSpacing and ColumnSpacing to 8 and added grid cell contents like this:

<ContentView Grid.Row="0" Grid.Column="0" BackgroundColor="White" Padding="2">
    <ContentView BackgroundColor="{StaticResource AppBackground}" Padding="2">
        <Label Text="AppBackground"/>
    </ContentView>
</ContentView>

The white border ensures that dark colors like black look like intentional color swatches (and not just an empty slot for one). The label text and static resource name referenced are intentionally the same. If you wanted to display the color hex code below the label, change the inner ContentView to a Grid, define two rows, and assign the two labels to row 0 and 1, etc.

image

Tagged:

Posts

  • DanVanderboomDanVanderboom Dan Vanderboom USUniversity ✭✭

    I should mention that the color swatch background color here is white (from the "border"). If you have semi-transparent colors you want on your color palette and you'd rather the background were black, you could insert another ContentView with 0 padding and a black background between the other two ContentViews.

  • DanVanderboomDanVanderboom Dan Vanderboom USUniversity ✭✭

    A theme and style editor, for Visual Studio and Xamarin Studio, would be pretty helpful. A tool like that could nicely organize all the app's themes, predefined colors, border and font settings, etc.

  • DanVanderboomDanVanderboom Dan Vanderboom USUniversity ✭✭

    Another useful feature in Xamarin Studio's XAML editor would be to display a color swatch near XAML elements.

  • renzskarenzska John Rennemeyer USMember ✭✭

    Could you post your full code example for this?

  • DanVanderboomDanVanderboom Dan Vanderboom USUniversity ✭✭
    edited June 2016

    `<?xml version="1.0" encoding="UTF-8"?>

    <ContentView

    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="DashboardClient.ColorPalette"
    BackgroundColor="Black">
    
    <ContentView.Resources>
        <ResourceDictionary>
            <Color x:Key="AppBackground">#000000</Color>
            <Color x:Key="MenuButtonBackground">#7F7F7F</Color>
            <Color x:Key="MenuButtonTextColor">#FFFFFF</Color>
            <Color x:Key="ErrorColor">#E00000</Color>
            <Color x:Key="WarningColor">#F09000</Color>
            <Color x:Key="MenuBackground">#000000</Color>
    
            <Style TargetType="Label">
                <Setter Property="TextColor" Value="White"/>
                <Setter Property="VerticalTextAlignment" Value="Center"/>
                <Setter Property="HorizontalTextAlignment" Value="Center"/>
            </Style>
        </ResourceDictionary>
    </ContentView.Resources>
    
    <ContentView.Content>
        <Grid RowSpacing="8" ColumnSpacing="8">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <ContentView Grid.Row="0" Grid.Column="0" BackgroundColor="White" Padding="2">
                <ContentView BackgroundColor="{StaticResource AppBackground}" Padding="2">
                    <Label Text="AppBackground"/>
                </ContentView>
            </ContentView>
    
            <ContentView Grid.Row="1" Grid.Column="0" BackgroundColor="White" Padding="2">
                <ContentView BackgroundColor="{StaticResource WarningColor}" Padding="2">
                    <Label Text="WarningColor" TextColor="Black"/>
                </ContentView>
            </ContentView>
    
            <ContentView Grid.Row="2" Grid.Column="0" BackgroundColor="White" Padding="2">
                <ContentView BackgroundColor="{StaticResource ErrorColor}" Padding="2">
                    <Label Text="ErrorColor"/>
                </ContentView>
            </ContentView>
    
            <ContentView Grid.Row="0" Grid.Column="1" BackgroundColor="White" Padding="2">
                <ContentView BackgroundColor="{StaticResource MenuBackground}" Padding="2">
                    <Label Text="MenuBackground"/>
                </ContentView>
            </ContentView>
    
            <ContentView Grid.Row="1" Grid.Column="1" BackgroundColor="White" Padding="2">
                <ContentView BackgroundColor="{StaticResource MenuButtonBackground}" Padding="2">
                    <Label Text="MenuButtonBackground"/>
                </ContentView>
            </ContentView>
    
            <ContentView Grid.Row="2" Grid.Column="1" BackgroundColor="White" Padding="2">
                <ContentView BackgroundColor="{StaticResource MenuButtonTextColor}" Padding="2">
                    <Label Text="MenuButtonTextColor" TextColor="Black"/>
                </ContentView>
            </ContentView>
        </Grid>
    </ContentView.Content>
    

    `

Sign In or Register to comment.