Button foreground color (1 Viewer)

Tgx

Retired Team Member
  • Premium Supporter
  • January 22, 2008
    1,560
    1,115
    Home Country
    Italy Italy
    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

    Lead Dev MP2
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    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

    Lead Dev MP2
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    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:

    Code:
    [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:

    Code:
    ....
      <!-- ************************* 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:
    Code:
      <!-- ***************************** 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
    Code:
                <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":
    Code:
      <!-- 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?

    Code:
      <!-- 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!):
    Code:
      <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"

    Code:
      <!-- 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).
     
    Last edited:

    Tgx

    Retired Team Member
  • Premium Supporter
  • January 22, 2008
    1,560
    1,115
    Home Country
    Italy Italy
    • Thread starter
    • Moderator
    • #4
    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

    Lead Dev MP2
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    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.
     

    morpheus_xx

    Lead Dev MP2
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    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

    Retired Team Member
  • Premium Supporter
  • January 22, 2008
    1,560
    1,115
    Home Country
    Italy Italy
    • Thread starter
    • Moderator
    • #8
    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

    Lead Dev MP2
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    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

    Lead Dev MP2
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    Any news on the skinning front? Questions are welcome, I think they will help others as well :)
     

    Users who are viewing this thread

    Similar threads

    Hi, yes, you are right. The official x64 1.32 is buggy. You can try a new installers from this post if you like.
    Hi, yes, you are right. The official x64 1.32 is buggy. You can try a new installers from this post if you like.
    hi, I'm setting up a new computer and have installed MP 1.3.2 after a few goes and getting all the prereqs installed, I was...
    Replies
    3
    Views
    658
    If anyone ever experiences the above, I found a fix. Removing and reinstalling MP-TVSeries fixed it. It must have gotten corrupted during the reinstall of MP. I also had to do the same with TRAKT which had some issues too that were not apparent at the time. All is well once again. :cool:
    If anyone ever experiences the above, I found a fix. Removing and reinstalling MP-TVSeries fixed it. It must have gotten corrupted...
    After much trial and error and comparing this computer with another that was working, I finally found out that Fanarthandler...
    Replies
    1
    Views
    773
    So far I needed to limit the media items to respect the token limit of ChatGPT. Now the complete media items can be used, because the movie list is splitted into chunks of a specified size and responses for each chunk are concentrated into the result list :) private async Task<string> GenerateResponseWithGPT(string searchQuery...
    So far I needed to limit the media items to respect the token limit of ChatGPT. Now the complete media items can be used, because...
    Hi, I'm planning to write a plugin for MediaPortal 2, that supports users to find the right media items with help of AI...
    Replies
    6
    Views
    858
    I had the same issue and found the executable under C:\ProgramData\Team MediaPortal\MediaPortal\skin\Titan\BasicHome.Editor\TitanEditor.exe Only the shortcut was missing.
    I had the same issue and found the executable under C:\ProgramData\Team...
    Hi all, Not a rant, more a sharing of experience (maybe hoping to get some clarification on which wrong turn I took) It has been...
    Replies
    9
    Views
    1K
    MP1 MP2 MP2 - V2.4.1 Remembering different views DE
    It’s technically not possible to combine the library and folder view. This is also the case for other HTPC softwares I fear. The media can quickly organized by filters, sorting etc., it’s not about fanart. The folder view is meant just as a basic navigation feature.
    It’s technically not possible to combine the library and folder view. This is also the case for other HTPC softwares I fear. The...
    Hi everyone, a newbie here who's just started playing around with MP2. I'm trying to get my music collection sorted (a collection...
    Replies
    5
    Views
    796
    Top Bottom