Forums | NoesisGUI

Posted: **20 Feb 2024, 06:36**

Hi, I've run into an issue where I cannot run storyboards on a tab item as I switch their selected state.

This code snippet functions as expected within blend -- the selected tab item turns red when changing visual states.
However, in native noesis the storyboards are not run when changing visual states. Only the first tab item which is selected by default will turn red.

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                    <Rectangle x:Name="Rect" Fill="Blue"/>
                    <ContentPresenter ContentSource="Header"/>
                    
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Selected">
                                <Storyboard Duration="0:0:1">
                                    <ColorAnimation Storyboard.TargetName="Rect" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)" To="Red"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unselected"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I've gotten around this issue for now by using Triggers.

Posted: **20 Feb 2024, 12:57**

I tried the following xaml in our Xamltoy and works as expected:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid.Resources>
    <Style TargetType="{x:Type TabItem}">
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      <Setter Property="VerticalContentAlignment" Value="Stretch"/>
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="{x:Type TabItem}">
                  <Grid>
                      <Rectangle x:Name="Rect" Fill="Blue"/>
                      <ContentPresenter ContentSource="Header" Margin="10,2"/>
                      
                      <VisualStateManager.VisualStateGroups>
                          <VisualStateGroup x:Name="SelectionStates">
                              <VisualState x:Name="Selected">
                                  <Storyboard Duration="0:0:1">
                                      <ColorAnimation Storyboard.TargetName="Rect" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)" To="Red"/>
                                  </Storyboard>
                              </VisualState>
                              <VisualState x:Name="Unselected"/>
                          </VisualStateGroup>
                      </VisualStateManager.VisualStateGroups>
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
    </Style>
  </Grid.Resources>
  <TabControl Width="300" Height="300" Foreground="White">
    <TabItem Header="Tab 1">
      <Ellipse Fill="Salmon"/>
    </TabItem>
    <TabItem Header="Tab 2">
      <Ellipse Fill="LightBlue"/>
    </TabItem>
  </TabControl>
</Grid>

How are you switching the selected tab? In code or by clicking on it?
Which version of NoesisGUI are you using?

Posted: **20 Feb 2024, 23:25**

Hi, thanks for the reply :)

The version of NoesisGUI that I am using is 3.1.5.
I'm changing the selected tab by modifying the SelectedIndex property directly in code behind, with focus disabled on the tab items themselves.
Currently I've got blend set up to listen to key presses for left and right which switches the SelectedIndex of the tab control.

Copying your example has the same incorrect behavior in game, whereas it works as expected in blend.

Posted: **22 Feb 2024, 10:55**

Could you please open a ticket in our bugtracker about this?

Forums | NoesisGUI

Visual states are not running storyboards within a control template

Visual states are not running storyboards within a control template

Re: Visual states are not running storyboards within a control template

Re: Visual states are not running storyboards within a control template

Re: Visual states are not running storyboards within a control template