How to play something similar to CSS in Windows Form?

Asked

Viewed 615 times

0

I would like to make a program with the same appearance/style as the site, but in Windows Form CSS does not work because it is a Web technology. So how could I do something like that?

  • 1

    It is possible, using hybrid application, gives a read in this article, is in English, but it shows how to do using Electron. http://mylifeforthecode.com/fulfilling-a-mvvm-dream-binding-a-html-view-to-a-csharp-dotnet-viewmodel-with-electron-and-edge-js/

  • 1

    Remembering that Spotify, Slack, among others were made with Electron or something similar.

2 answers

6


No, CSS is not a matter of web technology, it is whether the renderer supports, and in case it is not something implemented, there are desktop softwares that give some similar support, such as Qt for which uses QSS, a Qt CSS, but that’s another story.

The important thing is to understand that each rendering engine uses its own "css engine" in browsers and e-mail clients, but Windows Forms does not have this, returning to what matters, however you may be interested in WPF (Windows Presentation Foundation)

So something like in CSS:

div {
   font-familty: "Comic Sans MS";
   font-size: 14px;
   text-align: center;
}

The XAML template would affect everyone TextBlocks:

<Style TargetType="TextBlock">
  <Setter Property="HorizontalAlignment" Value="Center" />
  <Setter Property="FontFamily" Value="Comic Sans MS"/>
  <Setter Property="FontSize" Value="14"/>
</Style>

Source for reading:


However Xamlcss

However I found this project https://github.com/warappa/XamlCSS

An example to apply would be, in the App.xaml.cs (for example) add this:

public App()
{
    XamlCSS.XamarinForms.Css.Initialize(this);
    ...
}

And in App would be more or less this App.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:css="clr-namespace:XamlCSS;assembly=XamlCSS"
             x:Class="App.App">
  <Application.Resources>
    <ResourceDictionary>
    <css:StyleSheet x:Key="inlineStyle">
        <css:StyleSheet.Content>
          .important
          {
              BackgroundColor: Red;
              FontSize: 25;
              WidthRequest: 200;
          }
          Label
          {
              TextColor: Red;
              FontSize: 25;
          }
          Button
          {
              TextColor: Blue;
              BackgroundColor: Black;
          }
        </css:StyleSheet.Content>
      </css:StyleSheet>
    </ResourceDictionary>
  </Application.Resources>
</Application>

Supported platforms

Some features

  • CSS selectors
  • Multiplos Stylesheets
  • Nested selectors (similar to Sass)
  • Variables in the Css
  • Import style from other CSS files
  • Mixins

0

  • Not specifically for HTML, SVG also supports CSS, but relies heavily on the browser rendering engine.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.