Button foreground color (1 Viewer)

[Tgx]

Hi everybody,

I'm working at last on a real skin for MP2. I'm experimenting with all the controls. Is there a way to change the default white foreground color for buttons used in templates?

Thanks

Tgx

 

[morpheus_xx]

Buttons are defined inside buttons.xaml and they are using colors from other files (both can be theme depending). I can give more infos when I'm back home.

 

[morpheus_xx]

Let me describe some basic steps here, how to find the information you want. Take this as a small tour into the MP2 xaml files

Let's start to investigate the "default" skin. It's defined inside the "SkinBase" plugin.

For buttons we check the folder structure of the "SkinBase" plugin:

[SkinBase]
  Skin
    default (skin name)
      themes
        default (theme name)
          styles
            Buttons.xaml

So yes, Buttons.xaml we are looking for. So next look into this xaml file:

....
  <!-- ************************* Control styles for buttons ************************* -->
 
  <Style x:Key="ButtonControlStyle" TargetType="{x:Type Control}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Rectangle x:Name="ButtonControlRectangle" Stroke="{ThemeResource ButtonStrokeColor}"
              RadiusX="{ThemeResource ButtonControlRadiusX}" RadiusY="{ThemeResource ButtonControlRadiusY}">
            <Rectangle.Fill>
              <RadialGradientBrush GradientOrigin="0.85,0.82">
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.335" ScaleY="1.582"/>
                    <TranslateTransform X="0.027" Y="-0.006"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="{ThemeResource ButtonGradient1Color}" Offset="0"/>
                <GradientStop Color="{ThemeResource ButtonGradient2Color}" Offset="1"/>
              </RadialGradientBrush>
            </Rectangle.Fill>
          </Rectangle>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

This is the main definition of the button "background". Here is no content yet...
Next:

  <!-- ***************************** Standard buttons ******************************** -->
 
  <Style x:Key="DefaultButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Grid x:Name="GrowControl" RenderTransformOrigin="0.5,0.5" Margin="2">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.RenderTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
              </TransformGroup>
            </Grid.RenderTransform>
            <Control Style="{ThemeResource ButtonControlStyle}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
            <ContentPresenter x:Name="ButtonContentPresenter" Margin="10,5,10,5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="HasFocus" Value="True">
              <Trigger.EnterActions>
                <BeginStoryboard x:Name="Focused_BeginStoryboard" Storyboard="{ThemeResource FocusedButtonStoryboard}"/>
                <SoundPlayerAction Source="button12.wav" DisableOnAudioOutput="True"/>
              </Trigger.EnterActions>
              <Trigger.ExitActions>
                <StopStoryboard BeginStoryboardName="Focused_BeginStoryboard"/>
              </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
              <Trigger.EnterActions>
                <BeginStoryboard x:Name="Pressed_BeginStoryboard" Storyboard="{ThemeResource PressedButtonStoryboard}"
                    HandoffBehavior="TemporaryReplace"/>
                <SoundPlayerAction Source="button7.wav" DisableOnAudioOutput="True"/>
              </Trigger.EnterActions>
              <Trigger.ExitActions>
                <StopStoryboard BeginStoryboardName="Pressed_BeginStoryboard"/>
              </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
              <Trigger.EnterActions>
                <BeginStoryboard x:Name="Disabled_BeginStoryBoard" Storyboard="{ThemeResource DisabledButtonStoryboard}"/>
              </Trigger.EnterActions>
              <Trigger.ExitActions>
                <StopStoryboard BeginStoryboardName="Disabled_BeginStoryBoard"/>
              </Trigger.ExitActions>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
 
  <!-- Implicit default style for Button controls -->
  <Style BasedOn="{ThemeResource DefaultButtonStyle}" TargetType="{x:Type Button}"/>

The style for all generic buttons is found! There are more styles (like ButtonWideStyle, which are quite similar).

But still no real button content, that we can change here directly. All content is replaced into this template by

            <ContentPresenter x:Name="ButtonContentPresenter" Margin="10,5,10,5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

Now let's check where this style get's used. Do a "find in project" and search for 'Style="{ThemeResource ButtonWideStyle}"'.

One occurence leads to "othercontrols.xaml":

  <!-- An item list container represented by a standard "Button", scrolling its "ItemLabel" label when focused -->
  <Style x:Key="DefaultMenuItemContainerStyle" BasedOn="{ThemeResource DefaultItemContainerStyle}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListViewItem}">
          <Button Style="{ThemeResource ButtonWideStyle}"
              Command="{DynamicResource ResourceKey=Menu_Command}"
              IsEnabled="{Binding Enabled}" SetFocus="{Binding Path=Selected,Mode=OneTime}">
            <Button.Triggers>
              <Trigger Property="HasFocus" Value="True">
                <Setter TargetName="ItemLabel" Property="Scroll" Value="Auto"/>
                <Setter Property="StackPanel.ZIndex" Value="100.0"/>
              </Trigger>
            </Button.Triggers>
          </Button>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Yes, there is a button used as a ListViewItem, in general lists (menu, media items), which uses our '<Button Style="{ThemeResource ButtonWideStyle}"...'

There you find a first reference to the label, called '<Setter TargetName="ItemLabel" Property="Scroll" Value="Auto"/>'. Label contains the text content. Text has a color... So next question, where is this "DefaultMenuItemContainerStyle" used?

  <!-- ListView style to be used for main menu -->
  <Style x:Key="MainMenuListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
    <Setter Property="ItemTemplate" Value="{ThemeResource MainMenuItemDataTemplate}"/>
    <Setter Property="DataStringProvider" Value="{ThemeResource MainMenuItemDataStringProvider}"/>
    <Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
  </Style>

Getting better, now let's check the ItemTemplate "MainMenuItemDataTemplate"...

Well, we got it (finally!):

  <DataTemplate x:Key="MainMenuItemDataTemplate">
    <DockPanel x:Name="ItemControl" LastChildFill="True">
      <Label x:Name="ItemLabel" DockPanel.Dock="Center" Content="{Binding [Name]}" Color="{ThemeResource TextColor}"/>
    </DockPanel>
  </DataTemplate>

There is our label, using the Color "TextColor".

When we now search for the definition of "TextColor" this leads us to the real color, defined inside "colors.xml"

  <!-- White -->
  <ResourceWrapper x:Key="TextColor" Resource="White"/>

This value you can change now to any other color, "Red", "Green", "#FFFFFF" (white), "#A0FFFFFF" (semi transparent white).

As a rule of thumb, look into the .xaml files with suitable names, here "color.xaml" contains all definitions of main colors (or gradients).

 

[Tgx]

Thanks,

i really appreciate your help! One thing that puzzled me is the fact that the output of Expression Blend is slightly different from the syntax which Mediaportal 2 comprehends.
In this case i was looking for the property "foreground" produced through Blend and i could not find it in Mp2 xaml files. Later, analyzing the code, i found that every time we need to change the foreground color of a control i needed to search for the "color" property.

There will surely be other issue to solve... i hope you can help me!

Right now, is it possible to implement hidden menus (actionmenus) and animations like "windowopen/windowclose" like the ones used in Mp1?

Thanks

Tgx

 

[morpheus_xx]

There is a lot you can do with animations. I recently build such a hidden menu in Reflexions movie view. It slides in on key press or button click. You can check the latest version from dev branch.

There is also the Gui TestPlugin that shows more animations. In principle you can animate all transforms: translate, rotate and scale.

 

[Tgx]

I'll try!

Thanks

Tgx

 

[morpheus_xx]

Hi,

did you get further in your tests? Are there any things where I can assist you?

All questions are good to ask, I will try to put them into a "MP2-Skinning-FAQ" in the end, so other skinners can also profit from it.

Morpheus

 

[Tgx]

I'm a little busy at the moment. However i think i've understood how skinning works in MP2.
At first I tried to modify your Reflexion skin, but it ended in a skin full of useless code and unoptimized.
Then i realized that every skin depends on the default MP2 skin in every part.
I'm now rebuilding from ground up my skin starting from the default MP2 skin and adding my own code. It will take a while!

I'd like to add hidden menus like the ones from MP1, but i cannot find the branch you mentioned in the previous post. I'm not good with Git.

Thanks

Tgx

 

[morpheus_xx]

Hi,

the slide menu I have implemented is already merged into dev branch. So you find a fully working version in my Reflexion skin https://github.com/MediaPortal/Medi.../Skin/Reflexion/screens/master_slidemenu.xaml

In principle it does use RenderTransformations to Translate (x) the menu out of screen. On trigger ("menu" button click, or Key.Info) it slides in, sets the focus to menu.

Morpheus

 

[morpheus_xx]

Any news on the skinning front? Questions are welcome, I think they will help others as well