0.183 - having trouble removing default background style

20 Feb 2025, 01:46

Hi,

I've updated to the latest Studio (0.183) - and am having trouble removing the default styles from my control.

I believe i am setting up the style setters correctly (although i am a little confused by the "No Setters applied" block):

: Setters2.jpg (27.66 KiB) Viewed 3314 times

However, i have a strange dynamic where the foreground seems to behave correctly - but i can't override the default background (gray when mouseover, and light blue when selected):

: Run2.jpg (13.36 KiB) Viewed 3314 times

i imagine these are the NoesisGUI debug themes? I can't find in the XAML where these are set - and i tried placing the style directly in the Resources file separately - but this didn't seem to override. Any thoughts as to why the default is taking precedence in the style?

Let me know if this is user-error on my part or if i should add to bugtracker.

Cheers!

22 Feb 2025, 01:59

I am able to create the behavior i want directly in the XAML - but can't see where this has shown up when i run Noesis Studio with this template added to the style.

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                    <Border Background="Transparent" Padding="5">
                        <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

BTW - since Noesis Studio is stateless, i'm finding this is helpful in understanding how to use Studio - make a change to the XAML that reflects what you are trying to do - reload in Studio, and then you can see how Studio updated its settings to effect the change - although i wasn't able to find the configuration change for the above example.

28 Feb 2025, 11:17

Hi,

If you're working with a ListBox, the ListBoxItem styling should be applied to the ListBox.ItemContainerStyle property. Right clicking the ListBox will show a context menu where you can access the "Template > ItemContainer" and "Style > ItemContainer" to edit the corresponding Template and Style for the ListBoxItem.

As you noticed, the hover gray and selected blue backgrounds are coming from the default template defined by Noesis for the ListBoxItem. So if you want to change that, you have to define your own Template for the ListBoxItem.

Please let me know if you need more info about this.

28 Feb 2025, 17:58

Hi sfernandez,

Many thanks for the update. For the mouseover, I did try to add an item template from the templating section of the ListBox, and then in that template - added a style to which i could add a mouseover setter. But rather than replace the default style - it seemed to add the new mouseover style with the default style. The produced XAML for resource dictionary is below. Not sure how to remove the default Any references/examples would be great.

Cheers!

- Felgryn

    <ResourceDictionary>
      <DataTemplate x:Key="FeatureDataTemplate" DataType="scratch:feature">
        <Grid>
          <TextBlock Text="{Binding Path=featureString}" TextWrapping="Wrap"/>
        </Grid>
      </DataTemplate>
      <Style x:Key="Style.001" TargetType="Rectangle">
        <Setter Property="RadiusX" Value="0"/>
      </Style>
      <Style x:Key="Style.002" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}"/>
      <Style x:Key="DetailsFlyin" TargetType="Border">
        <Style.Resources>
          <Storyboard x:Key="DetailsFlyIn"/>
        </Style.Resources>
      </Style>
      <Storyboard x:Key="DetailsFlyIn">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DetailsPanel" Storyboard.TargetProperty="(UIElement.Opacity)">
          <LinearDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DetailsPanel" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
          <LinearDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>
      <DataTemplate x:Key="FeatureTemplate" DataType="scratch:Feature">
        <Grid>
          <TextBlock Text="{Binding}" TextWrapping="Wrap"/>
        </Grid>
      </DataTemplate>
      <DataTemplate x:Key="DataTemplate.001" DataType="ListBox">
        <Grid>
          <TextBlock Text="{Binding}" Style="{DynamicResource Style.003}"/>
        </Grid>
      </DataTemplate>
      <Style x:Key="Style.003" TargetType="TextBlock">

        <Style.Triggers>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="IsMouseOver" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="#FFEE5C5C"/>
            <Setter Property="Foreground" Value="#FF000000"/>
          </MultiTrigger>
        </Style.Triggers>
      </Style>
    </ResourceDictionary>

03 Mar 2025, 21:02

In that resource dictionary there is no definition for a ListBoxItem Style or Template. As I mentioned you should select the ListBox element, right click it to show the context menu, then pick Template > ItemContainer > Create, to create a custom ListBoxItem template.

In that template there are a couple of setters defined for IsMouseOver and IsSelected conditions. You can remove those, and create your own or define the Visual States for MouseOver and Selected.

24 Mar 2025, 16:18

Hi sfernandez,

Ah, i see. Many thanks for the further guidance! Much appreciated!

Cheers!

-Fel

0.183 - having trouble removing default background style

0.183 - having trouble removing default background style

Re: 0.183 - having trouble removing default background style

Re: 0.183 - having trouble removing default background style

Re: 0.183 - having trouble removing default background style

Re: 0.183 - having trouble removing default background style

Re: 0.183 - having trouble removing default background style

Who is online