OtherControls.xaml

<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary
    xmlns="www.team-mediaportal.com/2008/mpf/directx"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:system="clr-namespace:System"
    xmlns:collections="clr-namespace:MediaPortal.UI.Presentation.DataObjects;assembly=MediaPortal.UI"
    xmlns:mp_special_controls="clr-namespace:MediaPortal.UI.SkinEngine.SpecialElements.Controls;assembly=SkinEngine"
    xmlns:fanart="clr-namespace:MediaPortal.Extensions.UserServices.FanArtService.Client;assembly=FanArtService.Client"
    xmlns:bgm="clr-namespace:MediaPortal.UiComponents.BackgroundManager.Converter;assembly=BackgroundManager"
    xmlns:animation="clr-namespace:MediaPortal.UI.SkinEngine.Controls.Brushes.Animation;assembly=SkinEngine" 
    xmlns:bvc="clr-namespace:MediaPortal.UiComponents.BlueVision.Converters;assembly=BlueVision"
    DependsOnStyleResources="Colors,Buttons,Consts,Widgets"
    >

  <!-- BackgroundManager model -->
  <Model x:Key="BackgroundManagerModel" Id="1F4CAEDE-7108-483d-B5C8-18BEC7EC58E5"/>
  <bgm:ListItemActionIdConverter x:Key="ListItemActionIdConverter"/>

  <!-- ***************************** Converters ********************************* -->
  <bvc:StringCaseConverter x:Key="StringCaseConverter"/>
  <ExpressionMultiValueConverter x:Key="ExpressionMultiValueConverter"/>
  <ExpressionValueConverter x:Key="ExpressionValueConverter"/>
  <CommaSeparatedValuesConverter x:Key="CommaSeparatedValuesConverter"/>
  <ReferenceNotNull_BoolConverter x:Key="ReferenceToBoolConverter"/>
  <EmptyString2FalseConverter x:Key="EmptyStringToFalseConverter"/>
  <DateFormatConverter x:Key="DateFormatConverter"/>
  <DurationConverter x:Key="DurationConverter"/>
  <PriorityBindingConverter x:Key="PriorityBindingConverter"/>
  <StringFormatConverter x:Key="StringFormatConverter"/>

  <!-- If a control is defined without a style, the engine will choose a default style for that control.
       To avoid that default behavior, simply set this empty style. -->
  <Style x:Key="EmptyStyle"/>

  <!-- ***************************** ScrollViewer styles ********************************* -->

  <Style x:Key="LeftSideScrollViewerStyle" TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ScrollViewer}">
          <Grid x:Name="ScrollViewerGrid">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto"/>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <!-- Content -->
            <ScrollContentPresenter Grid.Row="0" Grid.Column="1" Grid.ZIndex="100" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

            <Grid x:Name="HorizontalScrollBar" IsVisible="{TemplateBinding ScrollBarXVisible}" Grid.Row="1" Grid.Column="1"
                Grid.ZIndex="0" Margin="2,6,2,6"
                RenderTransform="{DynamicResource ResourceKey=HorizontalScrollBarRenderTransform}">
              <!-- RenderTransform can be applied by any ListView by defining a transform inside ResourceWrapper x:Key="HorizontalScrollBarRenderTransform" -->
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
              </Grid.RowDefinitions>
              <!-- Background -->
              <Rectangle x:Name="ScrollBarXBackground" Grid.Row="0" Grid.Column="0"
                  Stroke="{ThemeResource ScrollBarStrokeColor}" RadiusX="4" RadiusY="4"
                  Height="{ThemeResource ScrollBarWidth}"
                  ActualWidth="{TemplateBinding Path=ScrollBarXSize,Mode=OneWayToSource}"
                  Fill="{ThemeResource ScrollBarBackgroundXColor}">
              </Rectangle>
              <!-- Knob -->
              <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
                <StackPanel>
                  <StackPanel.Width>
                    <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0}+({1}/2)">
                      <TemplateBinding Path="ScrollBarXKnobPos" />
                      <TemplateBinding Path="ScrollBarXKnobWidth" />
                    </MultiBinding>
                  </StackPanel.Width>
                </StackPanel>
                <Rectangle x:Name="ScrollBarXKnob" Width="{ThemeResource ScrollBarKnobWidth}" Height="{ThemeResource ScrollBarKnobHeight}"
                    Stroke="{ThemeResource ScrollBarKnobStrokeColor}" RadiusX="{ThemeResource ScrollBarKnobRadius}" RadiusY="{ThemeResource ScrollBarKnobRadius}"
                    Fill="{ThemeResource ScrollBarKnobBackgroundColor}">
                </Rectangle>
              </StackPanel>
            </Grid>
            <Grid x:Name="VerticalScrollBar" IsVisible="{TemplateBinding ScrollBarYVisible}" Grid.Row="0" Grid.Column="0"
                Grid.ZIndex="0" Margin="-30,2,0,2"
                RenderTransform="{DynamicResource ResourceKey=VerticalScrollbarRenderTransform}">
              <!-- RenderTransform can be applied by any ListView by defining a transform inside ResourceWrapper x:Key="VerticalScrollbarRenderTransform" -->
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>
              <!-- Background -->
              <Rectangle x:Name="ScrollBarYBackground" Grid.Row="0" Grid.Column="0"
                  Stroke="{ThemeResource ScrollBarStrokeColor}"
                  Width="{ThemeResource ScrollBarWidth}"
                  ActualHeight="{TemplateBinding Path=ScrollBarYSize,Mode=OneWayToSource}"
                  Fill="{ThemeResource ScrollBarBackgroundColor}">
              </Rectangle>
              <!-- Knob -->
              <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Vertical">
                <StackPanel>
                  <StackPanel.Height>
                    <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0}+({1}/2)">
                      <TemplateBinding Path="ScrollBarYKnobPos" />
                      <TemplateBinding Path="ScrollBarYKnobHeight" />
                    </MultiBinding>
                  </StackPanel.Height>
                </StackPanel>

                <!--Label Margin="-15,20,15,-20" Color="{ThemeResource TextColor}" FontSize="{ThemeResource SmallerFontSize}" 
                       Content="{Binding Source={StaticResource FanArtBackgroundModel}, Path=SimpleTitle}"/-->

                <!--Label x:Name="ItemLabel" Margin="-15,20,15,-20" Color="{ThemeResource TextColor}" FontSize="{ThemeResource SmallerFontSize}" Width="50"
                       Content="{Binding Source={DynamicResource FanArtBackgroundModel}, Path=SimpleTitle}"/-->

                <Rectangle x:Name="ScrollBarYKnob" Width="{ThemeResource ScrollBarKnobWidth}" Height="{ThemeResource ScrollBarKnobHeight}"
                    Stroke="{ThemeResource ScrollBarKnobStrokeColor}" RadiusX="{ThemeResource ScrollBarKnobRadius}" RadiusY="{ThemeResource ScrollBarKnobRadius}"
                    Fill="{ThemeResource ScrollBarKnobBackgroundColor}">
                </Rectangle>
              </StackPanel>
            </Grid>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="DefaultScrollViewerStyle" TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ScrollViewer}">
          <Grid x:Name="ScrollViewerGrid">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <!-- Content -->
            <ScrollContentPresenter Grid.Row="0" Grid.Column="0" Grid.ZIndex="100" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

            <Grid x:Name="HorizontalScrollBar" IsVisible="{TemplateBinding ScrollBarXVisible}" Grid.Row="1" Grid.Column="0"
                Grid.ZIndex="0" Margin="2,10,2,2"
                RenderTransform="{DynamicResource ResourceKey=HorizontalScrollBarRenderTransform}">
              <!-- RenderTransform can be applied by any ListView by defining a transform inside ResourceWrapper x:Key="HorizontalScrollBarRenderTransform" -->
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
              </Grid.RowDefinitions>
              <!-- Background -->
              <Rectangle x:Name="ScrollBarXBackground" Grid.Row="0" Grid.Column="0"
                  Stroke="{ThemeResource ScrollBarStrokeColor}" RadiusX="4" RadiusY="4"
                  Height="{ThemeResource ScrollBarWidth}"
                  ActualWidth="{TemplateBinding Path=ScrollBarXSize,Mode=OneWayToSource}"
                  Fill="{ThemeResource ScrollBarBackgroundXColor}">
              </Rectangle>
              <!-- Knob -->
              <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
                <StackPanel>
                  <StackPanel.Width>
                    <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0}+({1}/2)">
                      <TemplateBinding Path="ScrollBarXKnobPos" />
                      <TemplateBinding Path="ScrollBarXKnobWidth" />
                    </MultiBinding>
                  </StackPanel.Width>
                </StackPanel>
                <Rectangle x:Name="ScrollBarXKnob" Width="{ThemeResource ScrollBarKnobWidth}" Height="{ThemeResource ScrollBarKnobHeight}"
                    Stroke="{ThemeResource ScrollBarKnobStrokeColor}" RadiusX="{ThemeResource ScrollBarKnobRadius}" RadiusY="{ThemeResource ScrollBarKnobRadius}"
                    Fill="{ThemeResource ScrollBarKnobBackgroundColor}">
                </Rectangle>
              </StackPanel>
            </Grid>
            <Grid x:Name="VerticalScrollBar" IsVisible="{TemplateBinding ScrollBarYVisible}" Grid.Row="0" Grid.Column="1"
                Grid.ZIndex="0" Margin="2,2,10,2"
                RenderTransform="{DynamicResource ResourceKey=VerticalScrollbarRenderTransform}">
              <!-- RenderTransform can be applied by any ListView by defining a transform inside ResourceWrapper x:Key="VerticalScrollbarRenderTransform" -->
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>
              <!-- Background -->
              <Rectangle x:Name="ScrollBarYBackground" Grid.Row="0" Grid.Column="0"
                  Stroke="{ThemeResource ScrollBarStrokeColor}"
                  Width="{ThemeResource ScrollBarWidth}"
                  ActualHeight="{TemplateBinding Path=ScrollBarYSize,Mode=OneWayToSource}"
                  Fill="{ThemeResource ScrollBarBackgroundColor}">
              </Rectangle>
              <!-- Knob -->
              <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Vertical">
                <StackPanel>
                  <StackPanel.Height>
                    <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0}+({1}/2)">
                      <TemplateBinding Path="ScrollBarYKnobPos" />
                      <TemplateBinding Path="ScrollBarYKnobHeight" />
                    </MultiBinding>
                  </StackPanel.Height>
                </StackPanel>

                <Rectangle x:Name="ScrollBarYKnob" Width="{ThemeResource ScrollBarKnobWidth}" Height="{ThemeResource ScrollBarKnobHeight}"
                    Stroke="{ThemeResource ScrollBarKnobStrokeColor}" RadiusX="{ThemeResource ScrollBarKnobRadius}" RadiusY="{ThemeResource ScrollBarKnobRadius}"
                    Fill="{ThemeResource ScrollBarKnobBackgroundColor}">
                </Rectangle>
              </StackPanel>
            </Grid>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Implicit default style for ScrollViewer controls -->
  <Style BasedOn="{ThemeResource DefaultScrollViewerStyle}" TargetType="{x:Type ScrollViewer}"/>

  <!-- ***************************** Progress bar ******************************** -->
  <Style x:Key="DefaultProgressBarStyle" TargetType="{x:Type ProgressBar}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ProgressBar}">
          <Grid x:Name="ProgressBarGrid">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="ProgressBarTrack" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                       Height="4"
                       Fill="{ThemeResource ProgressBarBackgroundColor}"/>
            <Rectangle x:Name="ProgressBarIndicator" Width="{TemplateBinding PartIndicatorWidth}" HorizontalAlignment="Left"
                       Height="4"
                       Fill="{ThemeResource ProgressBarFillColor}"/>
            <StackPanel Orientation="Horizontal">
              <StackPanel Width="{TemplateBinding PartIndicatorWidth}"/>
              <Rectangle x:Name="ScrollBarYKnob" Width="18" Height="18"
                    Stroke="{ThemeResource ScrollBarKnobStrokeColor}" RadiusX="9" RadiusY="9"
                    Fill="{ThemeResource ScrollBarKnobBackgroundColor}"/>
            </StackPanel>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Implicit default style for ProgressBar controls -->
  <Style BasedOn="{ThemeResource DefaultProgressBarStyle}" TargetType="{x:Type ProgressBar}"/>

  <Style x:Key="OSDProgressBarStyle" TargetType="{x:Type ProgressBar}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ProgressBar}">
          <Grid x:Name="ProgressBarGrid" Margin="0,0,35,0">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="ProgressBarTrack" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                       Height="3"
                       Fill="{ThemeResource ScrollBarBackgroundXColor}"/>
            <Rectangle x:Name="ProgressBarIndicator" Width="{TemplateBinding PartIndicatorWidth}" HorizontalAlignment="Left"
                       Height="3"
                       Fill="{ThemeResource OSDProgressBarFillColor}"/>
            <StackPanel Orientation="Horizontal">
              <StackPanel Width="{TemplateBinding PartIndicatorWidth}"/>
              <Rectangle x:Name="ScrollBarYKnob" Width="18" Height="18"
                    Stroke="{ThemeResource ScrollBarKnobStrokeColor}" RadiusX="9" RadiusY="9"
                    Fill="{ThemeResource ScrollBarKnobBackgroundColor}"/>
            </StackPanel>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="PlayerControlsProgressBarStyle" TargetType="{x:Type ProgressBar}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ProgressBar}">
          <Grid x:Name="ProgressBarGrid">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="ProgressBarTrack" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                       Height="4"
                       Fill="{ThemeResource ProgressBarBackgroundColor}"/>
            <Rectangle x:Name="ProgressBarIndicator" Width="{TemplateBinding PartIndicatorWidth}" HorizontalAlignment="Left"
                       Height="4"
                       Fill="{ThemeResource ProgressBarFillColor}"/>
            <StackPanel Orientation="Horizontal">
              <StackPanel Width="{TemplateBinding PartIndicatorWidth}"/>
              <Rectangle x:Name="ScrollBarYKnob" Width="18" Height="18"
                    Stroke="#A0626262" RadiusX="9" RadiusY="9"
                    Fill="#D3D4D6"/>
            </StackPanel>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- ************************* ListView item container styles ************************** -->

  <!-- An item list base container style which sets the selected item's ZIndex to the top.
       This base style simly shows the content of the ListViewItem. -->
  <Style x:Key="DefaultItemContainerStyle" TargetType="{x:Type ListViewItem}">
    <Style.Triggers>
      <Trigger Property="Selected" Value="True">
        <!-- Hack: It is sufficient to set the attached ZIndex property for one panel type; the MP2 SkinEngine maps it to the
             same internal property for all panel types -->
        <Setter Property="StackPanel.ZIndex" Value="100.0"/>
      </Trigger>
    </Style.Triggers>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListViewItem}">
          <ContentPresenter/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- 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 MenuButtonWideStyle}" Margin="50,0,20,0" 
                  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="Opacity" Value="1"/> 
                <Setter TargetName="ItemLabel" Property="Scroll" Value="Auto"/>
                <Setter Property="StackPanel.ZIndex" Value="100.0"/>
              </Trigger>
            </Button.Triggers>
          </Button>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="PopupMenuItemContainerStyle" BasedOn="{ThemeResource DefaultItemContainerStyle}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListViewItem}">
          <Button Style="{ThemeResource PopupMenuButtonWideStyle}"
              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>

  <!-- An item list container represented by a standard "Button", scrolling its "ItemLabel" label when focused -->
  <Style x:Key="MainMenuMenuItemContainerStyle" BasedOn="{ThemeResource DefaultItemContainerStyle}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListViewItem}">
          <Button Style="{ThemeResource HomeButtonStyle}" Margin="5"
              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 TargetName="ItemLabel" Property="Color" Value="{ThemeResource TextColor}"/>
              </Trigger>         
            </Button.Triggers>
          </Button>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- A simple data template to show the Name of the ListItem in a Label -->
  <DataTemplate x:Key="DefaultItemDataTemplate" DataType="{x:Type collections:ListItem}">
    <DockPanel x:Name="ItemControl" LastChildFill="False">
      <Label x:Name="ItemLabel" DockPanel.Dock="Center" Content="{Binding [Name]}"
          HorizontalAlignment="Left" VerticalAlignment="Center"
          FontSize="{ThemeResource SmallFontSize}" Color="{ThemeResource TextColor}"/>
    </DockPanel>
  </DataTemplate>

  <DataTemplate x:Key="DefaultMenuItemDataTemplate" DataType="{x:Type collections:ListItem}">
    <DockPanel x:Name="ItemControl" LastChildFill="False">
      <Label x:Name="ItemLabel" DockPanel.Dock="Center" Content="{Binding [Name]}"
          HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-45,0,0,0"
          FontSize="{ThemeResource SmallFontSize}" Color="{ThemeResource TextColor}"
          Opacity="1"/> 
    </DockPanel>
  </DataTemplate>

  <DataStringProvider x:Key="DefaultItemDataStringProvider" Path="[Name]"/>

  <!-- A data template which shows an image and the Name of the ListItem -->
  <DataTemplate x:Key="ContentsMenuItemDataTemplate" DataType="{x:Type collections:ListItem}">
    <DockPanel x:Name="ItemControl" LastChildFill="False">
      <Image Thumbnail="True" Stretch="Uniform" DockPanel.Dock="Left" Height="32" Width="32"
          Source="{Binding [ImageSrc]}" FallbackSource="{Binding [DefaultIconSrc]}" Margin="-40,0,0,0"/> 
      <Label x:Name="ItemLabel" DockPanel.Dock="Center" Content="{Binding [Name]}" Margin="-40,0,0,0"
          HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="{ThemeResource SmallFontSize}"
          Color="{ThemeResource TextColor}"/>
    </DockPanel>
  </DataTemplate>

  <DataStringProvider x:Key="ContentsMenuItemDataStringProvider" Path="[Name]"/>

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

  <DataStringProvider x:Key="MainMenuItemDataStringProvider" Path="[Name]"/>

  <!-- Menu template -->
  <DataTemplate x:Key="MainMenuItemDataTemplateHover">
      
      <Grid x:Name="ItemControl">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="*"/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        
        <!-- Light blue background fill -->
        <Rectangle Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" StrokeThickness="0"
            Opacity="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
          <Rectangle.Fill>
            <VisualBrush x:Name="TileVisualBrush" AnimationEnabled="True">
              <VisualBrush.Visual>
                <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="#003366">
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                  </Grid.RowDefinitions>
                  <Image VerticalAlignment="Stretch" Stretch="UniformToFill" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="0"
                        Source="{Binding Converter={StaticResource ListItemActionIdConverter}, ConverterParameter=.jpg}">
                    <!--Image.RenderTransform>
                      <RotateTransform x:Name="rotate" CenterX="0.5" CenterY="0.5" Angle="0" />
                    </Image.RenderTransform>

                    <Image.Triggers>
                      <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, Path=HasFocus}" Value="True">
                        <Setter TargetName="rotate" Property="Angle" value="90">
                        </Setter>
                      </DataTrigger>
                    </Image.Triggers-->  
                    
                    <!--Image.Triggers>
                      <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, Path=HasFocus}" Value="False">
                        <Setter TargetName="TileVisualBrush" Property="Animation"/>
                        <Setter TargetName="TileVisualBrush" Property="AnimationEnabled" Value="False"/>
                      </DataTrigger>
                      <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, Path=HasFocus}" Value="True">
                        <Setter TargetName="TileVisualBrush" Property="AnimationEnabled" Value="True"/>
                        <Setter TargetName="TileVisualBrush" Property="Animation">
                          <Setter.Value>
                            <animation:KenBurnsAnimator Duration="10" />
                          </Setter.Value>
                        </Setter>
                      </DataTrigger>
                    </Image.Triggers-->
                  </Image>
                </Grid>
              </VisualBrush.Visual>
            </VisualBrush>
          </Rectangle.Fill>
        </Rectangle>
                
        <!-- Darkened band -->

         <Rectangle x:Name="ItemBand" Grid.Row="1" Grid.Column="0" Fill="#FF000000" Opacity="0.749" Height="60" StrokeThickness="0"
                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0">
          <Rectangle.Resources>
            <Storyboard x:Key="Storyboard1">
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ItemBand" Storyboard.TargetProperty="Height">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="60"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.3" Value="90"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.6" Value="60"/>
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </Rectangle.Resources>
   
          <Rectangle.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, Path=HasFocus}" Value="True">
              <DataTrigger.EnterActions>
                <BeginStoryboard x:Name="BandStoryboard" Storyboard="{StaticResource Storyboard1}"/>
              </DataTrigger.EnterActions>
              <DataTrigger.ExitActions>
                <StopStoryboard BeginStoryboardName="BandStoryboard"/>
              </DataTrigger.ExitActions>
            </DataTrigger>
          </Rectangle.Triggers>   
        </Rectangle>
                   
        <!-- Item label -->
        <Label Grid.Row="1" Grid.Column="0" x:Name="ItemLabel" HorizontalAlignment="Center" VerticalAlignment="Center"  Content="{Binding [Name]}"
               FontSize="{ThemeResource BigFontSize}" Color="{ThemeResource HomeNonFocusedColor}" Margin="0,0,0,0"/>
      </Grid>
  </DataTemplate>

  <!-- ***************************** ListView styles ********************************* -->

  <!-- Default ListView style. The properties "ItemTemplate", "ItemContainerStyle" and "DataStringProvider" should be exchanged for custom ListView styles. -->
  <Style x:Key="DefaultListViewStyle" TargetType="{x:Type ListView}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListView}">
          <ScrollViewer CanContentScroll="True">
            <ItemsPresenter VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
      <Setter.Value>
        <ItemsPanelTemplate>
          <StackPanel x:Name="ListItemsHost" IsItemsHost="True"/>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate" Value="{ThemeResource DefaultItemDataTemplate}"/>
    <Setter Property="DataStringProvider" Value="{ThemeResource DefaultItemDataStringProvider}"/>
    <Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultItemContainerStyle}"/>
  </Style>

  <!-- Implicit default style for ListView controls -->
  <Style BasedOn="{ThemeResource DefaultListViewStyle}" TargetType="{x:Type ListView}"/>


  <!-- ListView style to be used for all menus (main menu, dialog menus, context menus, ...) -->
  <Style x:Key="MenuListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListView}">
          <ScrollViewer CanContentScroll="True">
            <ItemsPresenter VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="{ThemeResource FixedDialogWidth}"/>
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate" Value="{ThemeResource DefaultMenuItemDataTemplate}"/>
    <Setter Property="DataStringProvider" Value="{ThemeResource DefaultItemDataStringProvider}"/>
    <Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
  </Style>

  <!-- ListView style to be used for main menu -->
  <Style x:Key="MainMenuListViewStyle" BasedOn="{ThemeResource MenuListViewStyle}">
  </Style>

  <Style x:Key="LeftMenuListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListView}">
          <ScrollViewer CanContentScroll="True" Style="{ThemeResource LeftSideScrollViewerStyle}">
            <ItemsPresenter VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="{ThemeResource FixedDialogWidth}"/>
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate" Value="{ThemeResource DefaultMenuItemDataTemplate}"/>
    <Setter Property="DataStringProvider" Value="{ThemeResource DefaultItemDataStringProvider}"/>
    <Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
  </Style>

  <!-- ListView style to be used in the content area of the screens -->
  <Style x:Key="ContentsMenuListViewStyle" BasedOn="{ThemeResource MenuListViewStyle}">
    <Setter Property="ItemTemplate" Value="{ThemeResource ContentsMenuItemDataTemplate}"/>
    <Setter Property="DataStringProvider" Value="{ThemeResource ContentsMenuItemDataStringProvider}"/>
    <Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
    <Setter Property="ItemsPanel">
      <Setter.Value>
        <ItemsPanelTemplate>
          <VirtualizingStackPanel x:Name="ListItemsHost" IsItemsHost="True"/>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="PopupMenuListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListView}">
          <ScrollViewer CanContentScroll="True">
            <ItemsPresenter VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="{ThemeResource FixedDialogWidth}"/>
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate" Value="{ThemeResource DefaultItemDataTemplate}"/>
    <Setter Property="DataStringProvider" Value="{ThemeResource DefaultItemDataStringProvider}"/>
    <Setter Property="ItemContainerStyle" Value="{ThemeResource PopupMenuItemContainerStyle}"/>
  </Style>

  <!-- ListView style to be used for main menu -->
  <Style x:Key="HomeMenuListViewStyle" BasedOn="{ThemeResource MainMenuListViewStyle}">
    <EventSetter Event="SelectionChanged" Handler="{CommandStencil Source={StaticResource BackgroundManagerModel}, Path=SetSelectedItem}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListView}">
          <ItemsPresenter VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate" Value="{ThemeResource MainMenuItemDataTemplateHover}"/>
    <Setter Property="ItemsPanel">
      <Setter.Value>
        <ItemsPanelTemplate>
          <Grid x:Name="ListItemsHost" IsItemsHost="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
              <ColumnDefinition Width="{ThemeResource GridLayoutWidth}"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="{ThemeResource GridLayoutHeight}"/>
              <RowDefinition Height="{ThemeResource GridLayoutHeight}"/>
              <RowDefinition Height="{ThemeResource GridLayoutHeight}"/>
              <RowDefinition Height="{ThemeResource GridLayoutHeight}"/>
              <RowDefinition Height="{ThemeResource GridLayoutHeight}"/>
              <RowDefinition Height="{ThemeResource GridLayoutHeight}"/>
            </Grid.RowDefinitions>
          </Grid>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemContainerStyle" Value="{ThemeResource MainMenuMenuItemContainerStyle}"/>
  </Style>

  <!-- An item list container represented by a standard "Button", scrolling its "ItemLabel" label when focused -->
  <Style x:Key="HomeGroupMenuItemContainerStyle" BasedOn="{ThemeResource DefaultItemContainerStyle}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListViewItem}">
          <Button Style="{ThemeResource GroupTabHeaderButtonStyle}" Margin="5,0,5,16" 
              Command="{DynamicResource ResourceKey=Menu_Command}"
              IsEnabled="{Binding Enabled}">
          </Button>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Displayed texts in main menu -->
  <DataTemplate x:Key="HomeGroupDataTemplate" DataType="{x:Type collections:ListItem}">

    <Border DockPanel.Dock="Center" Width="72" Height="71.5" BorderThickness="0" Margin="0">
      <Border.Background>
        <SolidColorBrush Color="#0066CC"/>
      </Border.Background>
      <Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="35" Height="35" Stretch="Fill" >
      <Image.Source>
        <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0} + {1}">
          <Binding Path="AdditionalProperties[Id]"/>
          <Binding Source=".png"/>
        </MultiBinding>
      </Image.Source>
    </Image>
    </Border>

  </DataTemplate>

  <!-- ListView style to be used for main groups menu -->
  <Style x:Key="HomeGroupListViewStyle" BasedOn="{ThemeResource MenuListViewStyle}">
    <Setter Property="ItemsPanel">
      <Setter.Value>
        <ItemsPanelTemplate>
          <StackPanel x:Name="ListItemsHost" IsItemsHost="True" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate" Value="{ThemeResource HomeGroupDataTemplate}"/>
    <Setter Property="ItemContainerStyle" Value="{ThemeResource HomeGroupMenuItemContainerStyle}"/>
  </Style>

  <!-- ListView style for MediaInfos in Currently Playing screen-->
  <DataTemplate x:Key="AudioLanguageItemDataTemplate" DataType="{x:Type collections:ListItem}">
    <WrapPanel Orientation="Horizontal" x:Name="ItemControl" >
      <Image Stretch="Uniform" Height="80">
        <Image.Source>
          <Binding Converter="{StaticResource StringFormatConverter}" ConverterParameter="{}Medialogos\flags\{0}.png"/>
        </Image.Source>
      </Image>
    </WrapPanel>
  </DataTemplate>
  
  <DataTemplate x:Key="AudioEncodingItemDataTemplate" DataType="{x:Type collections:ListItem}">
    <WrapPanel Orientation="Horizontal" x:Name="ItemControl" >
      <Image Stretch="Uniform" Height="80">
        <Image.Source>
          <Binding Converter="{StaticResource StringFormatConverter}" ConverterParameter="{}Medialogos\audio\{0}.png"/>
        </Image.Source>
      </Image>
    </WrapPanel>
  </DataTemplate>

  <Style x:Key="AudioLanguageListViewStyle" TargetType="{x:Type ListView}" BasedOn="{ThemeResource DefaultListViewStyle}" >
    <Setter Property="ItemTemplate" Value="{ThemeResource AudioLanguageItemDataTemplate}"/>
    <Setter Property="DataStringProvider" Value=""/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListView}">
          <ScrollViewer CanContentScroll="True" Margin="0" 
              HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ItemsPresenter VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="AudioEncodingListViewStyle" TargetType="{x:Type ListView}" BasedOn="{ThemeResource DefaultListViewStyle}" >
    <Setter Property="ItemTemplate" Value="{ThemeResource AudioEncodingItemDataTemplate}"/>
    <Setter Property="DataStringProvider" Value=""/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListView}">
          <ScrollViewer CanContentScroll="True" Margin="0" 
              HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ItemsPresenter VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Player control styles -->

  <ControlTemplate x:Key="PlayerControlPoster">
    <Grid x:Name="CoverGridContainer" IsVisible="{Binding ElementName=ItemTypeImage,Path=HasImage}" Margin="10,10,10,10"
          Width="{StaticResource MEDIA_POSTER_WIDTH}" Height="{StaticResource MEDIA_POSTER_HEIGHT}">
        <Image  x:Name="ItemTypeImage" HorizontalAlignment="Center" VerticalAlignment="Center" Width="{StaticResource MEDIA_POSTER_WIDTH}" 
                Height="{StaticResource MEDIA_POSTER_HEIGHT}" Stretch="UniformToFill" FallbackSource="VideoLarge.png" Source="{Binding MediaItem}">
        </Image>
    </Grid>
  </ControlTemplate>

  <ControlTemplate x:Key="PlayerControlButtons">
    <Grid HorizontalAlignment="Center" Margin="0">

      <StackPanel x:Name="MouseControlsPanel" Orientation="Horizontal" IsVisible="True" Margin="10,0,10,0" Height="30">
        <Button x:Name="SkipBackButton" Style="{ThemeResource SkipBackDarkButtonStyle}" Margin="{ThemeResource PlayerControlHomeButtonMargins}" IsVisible="{Binding CanSkipBack}"
              Command="{Command Previous}"/>
        <Button x:Name="RewindButton" Style="{ThemeResource RewindDarkButtonStyle}" Margin="{ThemeResource PlayerControlHomeButtonMargins}" IsVisible="{Binding CanSeekBackward}"
              Command="{Command SeekBackward}"/>
        <Button x:Name="PlayButton" Style="{ThemeResource PlayDarkButtonStyle}" Margin="{ThemeResource PlayerControlHomeButtonMargins}" IsVisible="{Binding CanPlay}"
              Command="{Command Play}"/>
        <Button x:Name="PauseButton" Style="{ThemeResource PauseDarkButtonStyle}" Margin="{ThemeResource PlayerControlHomeButtonMargins}" IsVisible="{Binding CanPause}"
              Command="{Command Pause}"/>
        <Button x:Name="StopButton" Style="{ThemeResource StopDarkButtonStyle}" Margin="{ThemeResource PlayerControlHomeButtonMargins}" IsVisible="{Binding CanStop}"
              Command="{Command Stop}"/>
        <Button x:Name="ForwardButton" Style="{ThemeResource ForwardDarkButtonStyle}" Margin="{ThemeResource PlayerControlHomeButtonMargins}" IsVisible="{Binding CanSeekForward}"
              Command="{Command SeekForward}"/>
        <Button x:Name="SkipForwardButton" Style="{ThemeResource SkipForwardDarkButtonStyle}" Margin="{ThemeResource PlayerControlHomeButtonMargins}" IsVisible="{Binding CanSkipForward}"
              Command="{Command Next}"/>
      </StackPanel>

    </Grid>

  </ControlTemplate>

  <ControlTemplate x:Key="PlayerControlVideoPrimary" >
    <Rectangle x:Name="Video"  Width="300" Height="170" Margin="0,10,0,10">
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="UIElement.MouseDown">
          <TriggerCommand Command="{Command Source={Service WorkflowManager},Path=NavigatePush,Parameters=882C1142-8028-4112-A67D-370E6E483A33}"/>
        </EventTrigger>
      </Rectangle.Triggers>
      <Rectangle.Fill>
        <VideoBrush Stream="0"/>
      </Rectangle.Fill>
    </Rectangle>
  </ControlTemplate>

  <ControlTemplate x:Key="PlayerControlVideoSecondary">
    <Rectangle x:Name="Video"  Width="300" Height="170" Margin="0,10,0,10">
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="UIElement.MouseDown">
          <TriggerCommand Command="{Command Source={Service WorkflowManager},Path=NavigatePush,Parameters=882C1142-8028-4112-A67D-370E6E483A33}"/>
        </EventTrigger>
      </Rectangle.Triggers>
      <Rectangle.Fill>
        <VideoBrush Stream="1"/>
      </Rectangle.Fill>
    </Rectangle>
  </ControlTemplate>

  <ControlTemplate x:Key="PlayerControlMediaInfo">
    <StackPanel Grid.Row="0" Grid.Column="2" Orientation="Vertical" VerticalAlignment="Stretch">
      <Grid x:Name="MediaInfoPanel" Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
          <RowDefinition Height="60"/>
          <RowDefinition Height="30"/>
          <RowDefinition Height="30"/>
          <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Label x:Name="MediaItemTitle" Grid.Row="0" Grid.ColumnSpan="3" Color="{ThemeResource PlayerControlMediaItemColor}" FontSize="{ThemeResource SmallFontSize}"
            Content="{Binding MediaItemTitle}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Scroll="Auto"
            Margin="0,0,0,0">
          <Label.Triggers>
            <DataTrigger Binding="{Binding IsPlayerPresent}" Value="False">
              <Setter Property="Color" Value="{ThemeResource PlayerControlInactiveMediaItemColor}"/>
            </DataTrigger>
          </Label.Triggers>
        </Label>

        <Label x:Name="CurrentPositionLabel" Grid.Row="1" Grid.Column="0" Color="{ThemeResource PlayerControlMediaItemColor}"
            FontSize="{ThemeResource SmallFontSize}" IsVisible="{Binding IsPlayerPresent}" HorizontalAlignment="Left"
            Content="{Binding CurrentTime}"
            Margin="0,0,10,0">
          <Label.Triggers>
            <DataTrigger Binding="{Binding IsPlayerPresent}" Value="False">
              <Setter Property="Color" Value="{ThemeResource PlayerControlInactiveMediaItemColor}"/>
            </DataTrigger>
          </Label.Triggers>
        </Label>

        <Label x:Name="DurationLabel" Grid.Row="1" Grid.Column="3" Color="{ThemeResource PlayerControlMediaItemColor}"
            FontSize="{ThemeResource SmallFontSize}" IsVisible="{Binding IsPlayerPresent}" HorizontalAlignment="Right"
            Content="{Binding Duration}">
          <Label.Triggers>
            <DataTrigger Binding="{Binding IsPlayerPresent}" Value="False">
              <Setter Property="Color" Value="{ThemeResource PlayerControlInactiveMediaItemColor}"/>
            </DataTrigger>
          </Label.Triggers>
        </Label>

        <ProgressBar x:Name="ProgressBar" Grid.ColumnSpan="3" Grid.Row="2" Height="22" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="0,5,0,0"
                Style="{ThemeResource PlayerControlsProgressBarStyle}"
                Value="{Binding Path=PercentPlayed}" IsVisible="{Binding IsPlayerPresent}" />

        <Control Template="{ThemeResource PlayerControlButtons}" Grid.Row="3" Grid.ColumnSpan="3" HorizontalAlignment="Center"/>

      </Grid>
    </StackPanel>
  </ControlTemplate>

  <Style x:Key="NavigationScreenPlayerControlStyleSecondary" TargetType="{x:Type mp_special_controls:PlayerControl}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type mp_special_controls:PlayerControl}">
          <Grid x:Name="PCGroupBox" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
            <Grid.RowDefinitions>
              <!-- Background -->
              <RowDefinition Height="Auto"/>
              <!-- Playback controls -->
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <!-- Optional fanart -->
              <ColumnDefinition Width="Auto"/>
              <!-- Media thumbnail -->
              <ColumnDefinition Width="Auto"/>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!-- Background of player control panel-->
            <Rectangle x:Name="PCBackground" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                       Fill="{ThemeResource PlayerControlBackgroundColor}">
            </Rectangle>

            <Control Template="{ThemeResource PlayerControlPoster}" Grid.Row="0" Grid.Column="0" />

            <Control Template="{ThemeResource PlayerControlVideoSecondary}" Grid.Column="1" Grid.ColumnSpan="1" />

            <Control Template="{ThemeResource PlayerControlMediaInfo}"  Grid.Row="0" Grid.Column="2" />

          </Grid>

          <ControlTemplate.Triggers>
            <Trigger Property="IsCurrentPlayer" Value="True">
              <Setter TargetName="PCBackground" Property="Fill" Value="{ThemeResource CurrentPlayerControlBackgroundColor1}"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Alternative style for 2nd player to mirror structure -->
  <Style x:Key="NavigationScreenPlayerControlStyle" TargetType="{x:Type mp_special_controls:PlayerControl}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type mp_special_controls:PlayerControl}">
          <Grid x:Name="PCGroupBox" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
            <Grid.RowDefinitions>
              <!-- Background -->
              <RowDefinition Height="Auto"/>
              <!-- Playback controls -->
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <!-- Media thumbnail -->
              <ColumnDefinition Width="Auto"/>
              <!-- Optional fanart -->
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <!-- Background of player control panel Fill="{ThemeResource PlayerControlBackgroundColor}"-->
            <Rectangle x:Name="PCBackground" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                       Fill="{ThemeResource PlayerControlBackgroundColor}">
            </Rectangle>
            <Control Template="{ThemeResource PlayerControlMediaInfo}"  Grid.Row="0" Grid.Column="0" />
            <Control Template="{ThemeResource PlayerControlVideoPrimary}" Grid.Row="0" Grid.Column="1" />            
            <Control Template="{ThemeResource PlayerControlPoster}" Grid.Row="0" Grid.Column="2" />
          </Grid>

          <ControlTemplate.Triggers>
            <Trigger Property="IsCurrentPlayer" Value="True">
              <Setter TargetName="PCBackground" Property="Fill" Value="{ThemeResource CurrentPlayerControlBackgroundColor1}"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Container style for the entries in the workflow navigation bar -->
  <Style x:Key="WorkflowNavigationBarContainerStyle" BasedOn="{ThemeResource DefaultItemContainerStyle}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListViewItem}">
          <!-- Available data in the given ListViewItem:
               - AdditionalProperties[IsFirst] is true for the first item
               - Executing the Command will navigate the workflow to the underlaying workflow state
          -->
          <Button Command="{Binding Command}" Style="{ThemeResource EmptyStyle}">
            <Button.TemplateControl>
              <Grid>
                <Grid.RowDefinitions>
                  <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <!-- Dummy placeholder for first item margin -->
                <Rectangle Width="40" Height="1" IsVisible="{Binding AdditionalProperties[IsFirst]}" Fill="#00000000"/>

                <Ellipse  Width="6" Height="6" Grid.Column="1" Margin="15,8,15,0"
                     IsVisible="{Binding !AdditionalProperties[IsFirst]}"
                     VerticalAlignment="Center">
                  <Ellipse.Fill>
                    <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0}?{1}:{2}">
                      <Binding Path="AdditionalProperties[IsLast]"/>
                      <Binding Source="{ThemeResource TextColor}" />
                      <Binding Source="{ThemeResource HomeNonFocusedColor}"/>
                    </MultiBinding>
                  </Ellipse.Fill>
                </Ellipse>

                <ContentPresenter Grid.Row="0" Grid.Column="2" x:Name="WorkflowNavibationItemContentPresenter" HorizontalAlignment="Center"/>
              </Grid>
            </Button.TemplateControl>
            <Button.Triggers>
              <!--<Trigger Property="HasFocus" Value="True">
                <Trigger.EnterActions>
                  <BeginStoryboard x:Name="Focused_BeginStoryboard" Storyboard="{ThemeResource FocusedNavbarContainerStoryboard}"/>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                  <StopStoryboard BeginStoryboardName="Focused_BeginStoryboard"/>
                </Trigger.ExitActions>
              </Trigger>-->
            </Button.Triggers>
          </Button>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Control which is used to symbolize the ellipsis of some entries when the workflow navigation bar is too long for the available space -->
  <Style x:Key="WorkflowNavigationBarEllipsisControlStyle" TargetType="{x:Type Control}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Label Content="..." Margin="10,2,10,2" Color="{ThemeResource WorkflowNavigationBarFontColor}"/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Data template for contents of workflow navigation bar entries -->
  <DataTemplate x:Key="WorkflowNavigationBarItemDataTemplate" DataType="{x:Type collections:ListItem}">
    <Label x:Name="ItemLabel" Content="{Binding Path=[Name], Converter={StaticResource StringCaseConverter}, ConverterParameter={x:Static bvc:StringConversion.LowerCase}}"
             Margin="0,4,0,0"
             FontSize="{ThemeResource SmallFontSize}"
             VerticalAlignment="Center">
      <Label.Color>
        <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0}?{1}:{2}">
          <Binding Path="AdditionalProperties[IsLast]"/>
          <Binding Source="{ThemeResource TextColor}" />
          <Binding Source="{ThemeResource HomeNonFocusedColor}"/>
        </MultiBinding>
      </Label.Color>
    </Label>
  </DataTemplate>

  <Style x:Key="WorkflowNavigationBarListViewStyle" TargetType="{x:Type ListView}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <ItemsPresenter/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate" Value="{ThemeResource WorkflowNavigationBarItemDataTemplate}"/>
    <Setter Property="ItemContainerStyle" Value="{ThemeResource WorkflowNavigationBarContainerStyle}"/>
    <Setter Property="ItemsPanel">
      <Setter.Value>
        <ItemsPanelTemplate>
          <mp_special_controls:WorkflowNavigationBarPanel x:Name="WorkflowNavigationBarItemsHost" IsItemsHost="True" Margin="-20,20,0,-5"
              Orientation="Horizontal"
              EllipsisControlStyle="{ThemeResource WorkflowNavigationBarEllipsisControlStyle}"
              Background="#60000000"/>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="WorkflowNavigationBarStyle" TargetType="{x:Type mp_special_controls:WorkflowNavigationBar}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <ListView x:Name="WorkflowNavigationBarListView" ItemsSource="{TemplateBinding NavigationItems}" Style="{ThemeResource WorkflowNavigationBarListViewStyle}"/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--*****************Textbox *********************styles-->
  <Style x:Key="DefaultTextBoxStyle" TargetType="{x:Type TextBox}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type TextBox}">
          <Border Background="{ThemeResource TextBoxBackgroundColor}" BorderBrush="{ThemeResource TextBoxBorderColor}"
              BorderThickness="{ThemeResource TextBoxBorderThickness}">
            <TextControl x:Name="TextControl" PreferredTextLength="{TemplateBinding Path=PreferredTextLength}"
                CaretIndex="{TemplateBinding Path=CaretIndex,Mode=TwoWay}" Text="{TemplateBinding Path=Text,Mode=TwoWay}"
                Color="{TemplateBinding Color}" TextAlign="{TemplateBinding TextAlign}" Margin="5,0,5,0" 
                IsEnabled="{TemplateBinding IsEnabled}"/>
            <Border.Triggers>
              <DataTrigger Binding="{Binding ElementName=TextControl,Path=HasFocus}" Value="True">
                <Setter Property="BorderBrush" Value="{ThemeResource TextBoxBorderFocusColor}"/>
              </DataTrigger>
              <DataTrigger Binding="{Binding ElementName=TextControl,Path=IsEnabled}" Value="False">
                <Setter Property="Background" Value="{ThemeResource TextBoxDisabledBackgroundColor}"/>
              </DataTrigger>
            </Border.Triggers>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="PasswordTextBoxStyle" TargetType="{x:Type TextBox}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type TextBox}">
          <Border Background="{ThemeResource TextBoxBackgroundColor}" BorderBrush="{ThemeResource TextBoxBorderColor}"
              BorderThickness="{ThemeResource TextBoxBorderThickness}" >
            <TextControl x:Name="TextControl" PreferredTextLength="{TemplateBinding Path=PreferredTextLength}"
                CaretIndex="{TemplateBinding Path=CaretIndex,Mode=TwoWay}" Text="{TemplateBinding Path=Text,Mode=TwoWay}"
                Color="{TemplateBinding Color}" TextAlign="{TemplateBinding TextAlign}" Margin="5,0,5,0"
                IsEnabled="{TemplateBinding IsEnabled}" IsPassword="True"/>
            <Border.Triggers>
              <DataTrigger Binding="{Binding ElementName=TextControl,Path=HasFocus}" Value="True">
                <Setter Property="BorderBrush" Value="{ThemeResource TextBoxBorderFocusColor}"/>
              </DataTrigger>
              <DataTrigger Binding="{Binding ElementName=TextControl,Path=IsEnabled}" Value="False">
                <Setter Property="Background" Value="{ThemeResource TextBoxDisabledBackgroundColor}"/>
              </DataTrigger>
            </Border.Triggers>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  
  
  
  <Storyboard x:Key="ShowScreenStoryboard" FillBehavior="Stop">
    <!--DoubleAnimationUsingKeyFrames BeginTime="00:00:00" FillBehavior="HoldEnd" Storyboard.TargetName="ScreenAnimationElement" Storyboard.TargetProperty="Opacity">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="{ThemeResource ScreenTransitionEndTime}" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" FillBehavior="HoldEnd" Storyboard.TargetName="ScreenAnimationElement" Storyboard.TargetProperty="RenderTransform.Children[3].X">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-1280"/>
      <SplineDoubleKeyFrame KeyTime="{ThemeResource ScreenTransitionEndTime}" Value="0"/>
    </DoubleAnimationUsingKeyFrames-->
  </Storyboard>

  <Storyboard x:Key="HideScreenStoryboard" FillBehavior="HoldEnd">
    <!--DoubleAnimationUsingKeyFrames BeginTime="00:00:00" FillBehavior="HoldEnd" Storyboard.TargetName="ScreenAnimationElement" Storyboard.TargetProperty="Opacity">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
      <SplineDoubleKeyFrame KeyTime="{ThemeResource ScreenTransitionEndTime}" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" FillBehavior="HoldEnd" Storyboard.TargetName="ScreenAnimationElement" Storyboard.TargetProperty="RenderTransform.Children[3].X">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="{ThemeResource ScreenTransitionEndTime}" Value="1280"/>
    </DoubleAnimationUsingKeyFrames-->
  </Storyboard>
  
</ResourceDictionary>