Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Wanderer · 26 Mar 2018, 21:48

I want test my theme created with Blend 2015, after some fails finally I load everything and it looks same as from Blend. But not 100%.
In Blend everything looks same as from vector graphic editor, which I use for create graphics. Noesis render everything little bigger . Like there is some thikness added for everything. For example I have gaps with 1px which Blend render it, but in Noesis there are no gaps. (btw I use completly vector graphic). And I discover when I turn off antialiasing, the thikness is gone and everything have right size. But I am not sure if then graphic is antialiased or not, or if it is GLFW responsibility? And maybe good to mention I use GLFW not AppFramework.

Another problem is, when mouse is over buttons, it don't change to desired color. All colors are set up to black. I use colors from main theme, not from xaml file with buttons. Here is my theme structure file: (btw. buttons from main theme are completly ok, if mouse is over, except graphic thikness as I described above)

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
					xmlns:local="clr-namespace:Zalohovaci_Program_GUI_2" 
					xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
					xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
					mc:Ignorable="d"
					>
					<!-- MergedDictionaries is copied from App.xaml in to DarkFlatTheme.xaml -->
					<ResourceDictionary.MergedDictionaries>
						<ResourceDictionary Source="DakFlatT_button_tg_select.xaml"/>
						<ResourceDictionary Source="DarkFlatT_button_add.xaml"/>
						<ResourceDictionary Source="DarkFlatT_button_delete.xaml"/>
						<!-- and lot of other buttons etc.. -->
					</ResourceDictionary.MergedDictionaries>
    <Color x:Key="White">White</Color>
    <Color x:Key="Grey_Light_Dark">#FF999999</Color>
    <Color x:Key="Grey_Dark_Light">#FF323232</Color>
    <Color x:Key="Grey_Dark_Mz">#FF1F1F1F</Color>
    <!-- Colors ... -->
    <Style x:Key="button_window_close" TargetType="{x:Type Button}">
       <!-- Lot of Code an this button colors is ok if mouse is over -->
    </Style>
</ResourceDictionary>

Wanderer · 27 Mar 2018, 12:01

I have this code in DarkFlatT_button_add.xaml:

<VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path3">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource Geen_Light}"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path5">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource Geen_Light}"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#19F4F4F5"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

After change from

<EasingColorKeyFrame KeyTime="0" Value="{StaticResource Geen_Light}"/>
to
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource Geen_Light}"/>

is working and color is changed if mouse is over button.
Can I use StaticResource with Noesis with some workaround without rewrite all documents in to DynamicResource?

And here is full code for button

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Zalohovaci_Program_GUI_2">
    <Style x:Key="button_add" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path3">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource Geen_Light}"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path5">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource Geen_Light}"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#19F4F4F5"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path3">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource Green_Dark_Mz}"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path5">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource Green_Dark_Mz}"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path3">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource Grey_Mz_Dark}"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path5">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource Grey_Mz_Dark}"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="rectangle" Fill="#00F4F4F5"/>
                        <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Name="svg8" mc:Ignorable="d" Height="20" Stretch="Fill" Width="20" >
                            <!--Unknown tag: sodipodi:namedview-->
                            <Canvas x:Name="pridaj" Width="20" Height="20" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition">
                                <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path3" StrokeThickness="2" StrokeMiterLimit="1.41421" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Data="M10 4L10 16">
                                    <Path.Stroke>
                                        <SolidColorBrush Color="{DynamicResource Green_Grey_Mz}"/>
                                    </Path.Stroke>
                                </Path>
                                <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path5" StrokeThickness="2" StrokeMiterLimit="1.41421" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Data="M16 10L4 10">
                                    <Path.Stroke>
                                        <SolidColorBrush Color="{DynamicResource Green_Grey_Mz}"/>
                                    </Path.Stroke>
                                </Path>
                            </Canvas>
                        </Viewbox>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True"/>
                        <Trigger Property="IsDefaulted" Value="True"/>
                        <Trigger Property="IsMouseOver" Value="True"/>
                        <Trigger Property="IsPressed" Value="True"/>
                        <Trigger Property="IsEnabled" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

27 Mar 2018, 17:47

The unexpected thickness you are seeing is due to PPAA. It is our custom antialiasing technique that doesn't needs MSAA to work, but it extrudes edges of the geometry (<1px) to smooth them.
If that is a problem but your game/app can afford MSAA, then you can disable PPAA to get better results.

About the use of StaticResources you have to take into account that they can only be resolved if they are defined before they are used.
So if you reference any color resource in a button template, that color must be defined in that same xaml (or in a merged one) before.
You should be getting parsing errors if this is not the case. Looking at the attached xamls the colors you define are not available to the button xamls you are merging.

Wanderer · 27 Mar 2018, 19:31

The unexpected thickness you are seeing is due to PPAA. It is our custom antialiasing technique that doesn't needs MSAA to work, but it extrudes edges of the geometry (<1px) to smooth them.
If that is a problem but your game/app can afford MSAA, then you can disable PPAA to get better results.

Thanks.

About the use of StaticResources you have to take into account that they can only be resolved if they are defined before they are used.
So if you reference any color resource in a button template, that color must be defined in that same xaml (or in a merged one) before.
You should be getting parsing errors if this is not the case.

That means I must use DynamicResource instead Static, if I use mergedDictionaries? I was think it is working same as Blend. And I don't get any errors from Noesis and everything is loaded.

Looking at the attached xamls the colors you define are not available to the button xamls you are merging.

Colors are there, but I not copy all code and colors.

27 Mar 2018, 20:49

Noesis regarding to StaticResource should work the same as in WPF.

Resources.xaml

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Buttons.xaml"/>
    ...
  </ResourceDictionary.MergedDictionaries>
  <SolidColorBrush x:Key="RedBrush" Color="Red"/>
  ...
</ResourceDictionary>

If Buttons.xaml uses RedBrush as a StaticResource, both Blend and Noesis will raise an error because that resource is not defined for that xaml.
In that case you need to define these brush resources in another dictionary and reference it from the Buttons.xaml.

Resources.xaml

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Buttons.xaml"/>
    ...
  </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Brushes.xaml

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <SolidColorBrush x:Key="RedBrush" Color="Red"/>
  ...
</ResourceDictionary>

Buttons.xaml

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Brushes.xaml"/>
  </ResourceDictionary.MergedDictionaries>
  <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
    <Grid Background="{StaticResource RedBrush}">
    ...
  </ControlTemplate>
</ResourceDictionary>

Wanderer · 27 Mar 2018, 23:25

Noesis regarding to StaticResource should work the same as in WPF.

Resources.xaml
Code: Select all
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Buttons.xaml"/>
    ...
  </ResourceDictionary.MergedDictionaries>
  <SolidColorBrush x:Key="RedBrush" Color="Red"/>
  ...
</ResourceDictionary>
If Buttons.xaml uses RedBrush as a StaticResource, both Blend and Noesis will raise an error because that resource is not defined for that xaml.
In that case you need to define these brush resources in another dictionary and reference it from the Buttons.xaml.

But "problem" is, I have it done (this dictionary structure) exactly as you describe it inside Blend (ok, not exactly because everything is under App.xaml and for noesis I only exctract mergedDictionaries and paste it in ResourceDictionary DarkTheme.xaml) and it working without any error. Even with Noesis, except that, everything with StaticResource have black color.

Buttons.xaml

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Brushes.xaml"/>
  </ResourceDictionary.MergedDictionaries>
  <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
    <Grid Background="{StaticResource RedBrush}">
    ...
  </ControlTemplate>
</ResourceDictionary>

I add inside my DarkFlatT_button_add.xaml

  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="DarkFlatTheme.xaml"/>
  </ResourceDictionary.MergedDictionaries>
    <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
    <Grid Background="{StaticResource Geen_Light}">
    ...
  </ControlTemplate>

and now add button set correct color when mouse is over button. Problem is, it load DarkFlatTheme.xaml twice. If I add this code for each xaml file, DarkFlatTheme will be loaded so many times as I have xaml files.
Is there option to set up dictionary in this way (maybe then button_add take colors from Theme)? pseudo code:

					<ResourceDictionary.MergedDictionaries>
						<ResourceDictionary Source="DarkFlatTheme.xaml"/>
							<ResourceDictionary.MergedDictionaries>
								<ResourceDictionary Source="DarkFlatT_button_add.xaml"/>
							</ResourceDictionary.MergedDictionaries>
					</ResourceDictionary.MergedDictionaries>

28 Mar 2018, 11:15

it working without any error

Are you using C++ SDK? In that case the error handler you pass on Noesis::GUI::Init() should be called everytime a StaticResource cannot be resolved.
In case of using Unity or C# SDK it should be throwing a NoesisException. In Unity you can see messages about parsing errors in the console.

Even with Noesis, except that, everything with StaticResource have black color

This occurs when StaticResource is not found, so a null is set in the property.

I add inside my DarkFlatT_button_add.xaml... and now add button set correct color when mouse is over button.

Because as I explained before, a StaticResource can only be resolved if the xaml include a previous definition of that resource, directly or via a MergedDictionary.

Is there option to set up dictionary in this way (maybe then button_add take colors from Theme)?

There is an option if you want to avoid referencing several times the same xaml, but is kind of a hack.
You can create an empty ResourceDictionary and call Noesis::GUI::SetApplicationResources().
Then you can load the Brushes (and other common resources) dictionary and add it as merged to the application dictionary you created.
Then load the rest of dictionaries depending on Brushes dictionary and add them as merged to the application dictionary too. You can also group all these dictionaries into one to simplify the code.
This will work without errors because StaticResources will be able to find brushes this time in the global Application Resources dictionary.

Wanderer · 28 Mar 2018, 13:26

it working without any error
Are you using C++ SDK?

Yes, I mention it in first post, but maybe not clear as I meant.

Is there option to set up dictionary in this way (maybe then button_add take colors from Theme)?
There is an option if you want to avoid referencing several times the same xaml, but is kind of a hack.
You can create an empty ResourceDictionary and call Noesis::GUI::SetApplicationResources().
Then you can load the Brushes (and other common resources) dictionary and add it as merged to the application dictionary you created.
Then load the rest of dictionaries depending on Brushes dictionary and add them as merged to the application dictionary too. You can also group all these dictionaries into one to simplify the code.
This will work without errors because StaticResources will be able to find brushes this time in the global Application Resources dictionary.

Can you please provide example? I can not find any function how to do this with codebehind with Noesis.
I tried something but every time I get crash:

//Theme->SetSource("Themes/DarkFlat/DarkFlatTheme.xaml"); // is comented and didn't load xaml for Theme, //  Theme is Noesis::ResourceDictionary as member.
	Noesis::GUI::SetApplicationResources(Theme.GetPtr()); 
	Noesis::Ptr<Noesis::ResourceKeyType> rkey = Noesis::GUI::LoadXaml<Noesis::ResourceKeyType>("Themes/DarkFlat/DarkFlatTheme.xaml");
	Noesis::Ptr<Noesis::ResourceDictionary> rd = Noesis::GUI::LoadXaml<Noesis::ResourceDictionary>("Themes/DarkFlat/others.xaml"); // I add all buttons etc.. in to one others.xaml as merged dictionary
	Noesis::Ptr<Noesis::ResourceDictionaryCollection> rdc = *new Noesis::ResourceDictionaryCollection;
	rdc->Add("Themes/DarkFlat/others.xaml");
	Theme->Add(rkey.GetPtr(), rdc.GetPtr()); // or Theme->Add(rkey.GetPtr(), rd.GetPtr()); allways I get crash on this

Wanderer · 28 Mar 2018, 13:28

I tried something but every time I get crash:

//Theme->SetSource("Themes/DarkFlat/DarkFlatTheme.xaml"); // is comented and didn't load xaml for Theme, //  Theme is Noesis::ResourceDictionary as member.
	Noesis::GUI::SetApplicationResources(Theme.GetPtr()); 
	Noesis::Ptr<Noesis::ResourceKeyType> rkey = Noesis::GUI::LoadXaml<Noesis::ResourceKeyType>("Themes/DarkFlat/DarkFlatTheme.xaml");
	Noesis::Ptr<Noesis::ResourceDictionary> rd = Noesis::GUI::LoadXaml<Noesis::ResourceDictionary>("Themes/DarkFlat/others.xaml"); // I add all buttons etc.. in to one others.xaml as merged dictionary
	Noesis::Ptr<Noesis::ResourceDictionaryCollection> rdc = *new Noesis::ResourceDictionaryCollection;
	rdc->Add("Themes/DarkFlat/others.xaml");
	Theme->Add(rkey.GetPtr(), rdc.GetPtr()); // or Theme->Add(rkey.GetPtr(), rd.GetPtr()); allways I get crash on this

Program load all xaml files and then crash.

EDIT:: I wanted edit post and mistakenly I click on Quote.

28 Mar 2018, 13:52

The code I was talking about should look like this:

// Noesis::GUI::Init() ...
// Noesis::GUI::SetXamlProvider/SetFontProvider/SetTextureProvider...

Ptr<Noesis::ResourceDictionary> appResources = *new ResourceDictionary();
Noesis::GUI::SetApplicationResources(appResources);

Ptr<Noesis::ResourceDictionary> commonResources =
    Noesis::GUI::LoadXaml<Noesis::ResourceDictionary>(
        "Themes/DarkFlat/DarkFlatTheme.xaml");
appResources->GetMergedDictionaries()->Add(commonResources);

Ptr<Noesis::ResourceDictionary> otherResources =
    Noesis::GUI::LoadXaml<Noesis::ResourceDictionary>(
        "Themes/DarkFlat/others.xaml");
appResources->GetMergedDictionaries()->Add(otherResources);

Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Re: Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Re: Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Re: Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Re: Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Re: Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Re: Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Re: Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Re: Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Re: Custom theme (from Blend 2015) problem with rendering and colors in Noesis.

Who is online