Page 1 of 2

Controls are transparent and pink

Posted: 03 Dec 2020, 20:53
by JinxxNoesis
All my elements are transparent and pink. I cant set the background colour on anything.
I've attached some screenshots here:

Unity:
https://i.imgur.com/xe14KDo.png

Code:
https://i.imgur.com/ucFDUXb.png
https://i.imgur.com/BBFRYnL.png

Re: Controls are transparent and pink

Posted: 03 Dec 2020, 20:55
by jsantos
Please read the following post

viewtopic.php?f=3&t=2089

Thanks!

Re: Controls are transparent and pink

Posted: 03 Dec 2020, 21:04
by JinxxNoesis
Thanks for the incredibly fast reply.

Re: Controls are transparent and pink

Posted: 03 Dec 2020, 21:09
by JinxxNoesis
Can i set the BasedOn property in a global theme?
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


    <Color x:Key="PrimaryBackground">#44A7F7</Color>
    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="{StaticResource PrimaryBackground}"></SolidColorBrush>

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="{StaticResource ResourceKey=PrimaryBackgroundBrush}"/>
    </Style>

</ResourceDictionary>
Edit: I copied and pasted the example into my code and am still faced with a pink button. Am I missing something obvious?

https://i.imgur.com/NpXR8KY.png
https://i.imgur.com/vCHeeZk.png

Re: Controls are transparent and pink

Posted: 04 Dec 2020, 12:12
by sfernandez
Can i set the BasedOn property in a global theme?
The StaticResource you set in BasedOn will resolve to any previous style definition of that same type. If there is none, then it will fallback to our internal theme with pink templates.

The idea is that you define your own theme with Styles and Templates and set it in the ApplicationResources, so you don't end using our debug pink templates. You can start by setting the NoesisTheme we provide and then tweak the style for the controls you use in your application.
I copied and pasted the example into my code and am still faced with a pink button. Am I missing something obvious?
If you define a local style in you xaml and using the BasedOn still shows the pink template is because you haven't set any ApplicationResources with a style and template for that control.

Re: Controls are transparent and pink

Posted: 06 Dec 2020, 23:15
by JinxxNoesis
Thing is I set this as my application theme and it still shows pink

Re: Controls are transparent and pink

Posted: 07 Dec 2020, 10:29
by sfernandez
If you have set the following dictionary as the ApplicationResources:
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


    <Color x:Key="PrimaryBackground">#44A7F7</Color>
    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="{StaticResource PrimaryBackground}"></SolidColorBrush>

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="{StaticResource ResourceKey=PrimaryBackgroundBrush}"/>
    </Style>

</ResourceDictionary>
It is expected that you see the pink templates, because you are defining a Style for all Button controls that has no Template property specified, so it falls back to our internal debug template.

I recommend you include our NoesisTheme as base, and the tweak the control styles and templates you need. The easiest way could be by just merging it in your ApplicationResoruces dictionary:
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Assets/NoesisGUI/Theme/NoesisTheme.DarkBlue.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Color x:Key="PrimaryBackground">#44A7F7</Color>
    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="{StaticResource PrimaryBackground}"></SolidColorBrush>

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="{StaticResource ResourceKey=PrimaryBackgroundBrush}"/>
    </Style>

</ResourceDictionary>
Please let me know if that works.

Re: Controls are transparent and pink

Posted: 09 Dec 2020, 19:04
by JinxxNoesis
So after two days of toying around, it seems that the application resource set in the noesis settings asset isn't being applied to any user controls. I looked in the samples, those all seem to have the resources within the xaml. Not quite sure what to do at this point other than directly adding the resources inside the controls respectively

Re: Controls are transparent and pink

Posted: 10 Dec 2020, 12:01
by sfernandez
A control in Noesis gets its appearance from the Template property. The template defines the visual tree (UI elements) that compose the appearance of the control. It can also contain triggers and visual states to change the appearance depending on the control state. A theme dictionary must define the styles and templates for the controls used in your application (if you don't define the template it will show our minimalistic pink template). In your example it could be like this:
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Color x:Key="PrimaryBackground">#44A7F7</Color>
    <Color x:Key="PrimaryOverBackground">#64C7F7</Color>
    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="{StaticResource PrimaryBackground}"/>
    <SolidColorBrush x:Key="PrimaryBackgroundOverBrush" Color="{StaticResource PrimaryOverBackground}"/>
    
    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
      <Border x:Name="Bd" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </Border>
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Background" Value="{StaticResource PrimaryBackgroundOverBrush}" TargetName="Bd"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource ResourceKey=PrimaryBackgroundBrush}"/>
        <Setter Property="Template" Value="{StaticResource TemplateTemplate}"/>
    </Style>

</ResourceDictionary>
This Button style is using Button type as implicit key, so all buttons in your xamls will use the style and template defined in the theme:
<StackPanel
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Button Content="Button 1"/>
  <Button Content="Button 2"/>
  <Button Content="Button 3"/>
</StackPanel>
You have to set the theme dictionary in ApplicationResources property under Noesis Settings.

Re: Controls are transparent and pink

Posted: 10 Dec 2020, 15:05
by JinxxNoesis
Finally fixed, thanks you so much.