JinxxNoesis
Topic Author
Posts: 7
Joined: 12 Nov 2020, 23:00

Controls are transparent and pink

03 Dec 2020, 20:53

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

Tags:
 
User avatar
jsantos
Site Admin
Posts: 3122
Joined: 20 Jan 2012, 17:18
Contact:

Re: Controls are transparent and pink

03 Dec 2020, 20:55

Please read the following post

viewtopic.php?f=3&t=2089

Thanks!
 
JinxxNoesis
Topic Author
Posts: 7
Joined: 12 Nov 2020, 23:00

Re: Controls are transparent and pink

03 Dec 2020, 21:04

Thanks for the incredibly fast reply.
 
JinxxNoesis
Topic Author
Posts: 7
Joined: 12 Nov 2020, 23:00

Re: Controls are transparent and pink

03 Dec 2020, 21:09

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
 
User avatar
sfernandez
Site Admin
Posts: 2220
Joined: 22 Dec 2011, 19:20

Re: Controls are transparent and pink

04 Dec 2020, 12:12

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.
 
JinxxNoesis
Topic Author
Posts: 7
Joined: 12 Nov 2020, 23:00

Re: Controls are transparent and pink

06 Dec 2020, 23:15

Thing is I set this as my application theme and it still shows pink
 
User avatar
sfernandez
Site Admin
Posts: 2220
Joined: 22 Dec 2011, 19:20

Re: Controls are transparent and pink

07 Dec 2020, 10:29

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.
 
JinxxNoesis
Topic Author
Posts: 7
Joined: 12 Nov 2020, 23:00

Re: Controls are transparent and pink

09 Dec 2020, 19:04

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
 
User avatar
sfernandez
Site Admin
Posts: 2220
Joined: 22 Dec 2011, 19:20

Re: Controls are transparent and pink

10 Dec 2020, 12:01

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.
 
JinxxNoesis
Topic Author
Posts: 7
Joined: 12 Nov 2020, 23:00

Re: Controls are transparent and pink

10 Dec 2020, 15:05

Finally fixed, thanks you so much.

Who is online

Users browsing this forum: No registered users and 1 guest