Blue Vision (3 Viewers)

[ge2301]

I intentionally switched from Uniform to Fill, because the OpacityMask does not work for some reasons. The edges are always unrounded for audio covers with "uniform".

Solved, the solution was too stupid, so I didn't try before. The * also need to be replaced with 560 ... then the mask is working

<Grid
  xmlns="www.team-mediaportal.com/2008/mpf/directx"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:fanart="clr-namespace:MediaPortal.Extensions.UserServices.FanArtService.Client;assembly=FanArtService.Client"
  xmlns:media="clr-namespace:MediaPortal.UiComponents.Media.Models.AspectWrappers;assembly=Media"
     
  x:Name="MediaItemDetails" HorizontalAlignment="Right"
  Width="560" Height="560">
  <!--Margin="80,5,-15,17"-->
  <!-- Rounded corners are applied by OpacityMask -->

  <Grid.Resources>
    <fanart:FanArtImageSourceConverter x:Key="FanArtImageSourceConverter"/>
    <fanart:MediaItemAspectToBoolConverter x:Key="MediaItemAspectToBoolConverter" />
  </Grid.Resources>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>

  <!-- Image-->
  <Image Grid.Column="0" HorizontalAlignment="Right" Stretch="Uniform" Margin="0,0,0,0"
         Source="{Binding Source={StaticResource FanArtBackgroundModel}, Path=ImageSource, Converter={StaticResource FanArtImageSourceConverter}, ConverterParameter=FanArt;560;560}"
         FallbackSource="{Binding Source={StaticResource FanArtBackgroundModel},Path=MediaItem}"
         OpacityMask="{ThemeResource HomeTileOpacityBrush}">
  </Image>
</Grid>

 

[ge2301]

Below the width of the FanArt is defined. Remaining space is used for the item list. For cover flow view it is not visible.
https://github.com/MediaPortal/Medi...ueVision/screens/SimpleShowItems.xaml#L31-L36
Because the audio cover is smaller in width now, there is a huge gap between fanart and item list. I want to close this gap. I tried to exchange above code with below. It does not work, but have no further idea how I can express it.

I think it's not correct to use "mediaItem" as Path, but there is no "Layout" for Audio, Video, Series, .... as path)

  <Control Grid.Column="1" VerticalAlignment="Stretch" Width="720"
  Template="{Binding Source={DynamicResource Media_Details_Template}}">
  <Control.IsVisible>
  <Binding Source="{StaticResource ViewModeModel}" Path="LayoutType" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} != {LayoutType}.{CoverLayout}"/>
  <Binding Source="{StaticResource FanArtBackgroundModel}" Path="Mediaitem" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} != {Mediaitem}.{x:static aspect:AudioAspect.ASPECT_ID}"/>
  </Control.IsVisible>
  </Control>
  <Control Grid.Column="1" VerticalAlignment="Stretch" Width="560"
  Template="{Binding Source={DynamicResource Media_Details_Template}}">
  <Control.IsVisible>
  <Binding Source="{StaticResource ViewModeModel}" Path="LayoutType" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} != {LayoutType}.{CoverLayout}"/>
  <Binding Source="{StaticResource FanArtBackgroundModel}" Path="Mediaitem" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} == {Mediaitem}.{x:static aspect:AudioAspect.ASPECT_ID}"/>
  </Control.IsVisible>
  </Control>

 

[osre]

The problem with Fill is, that it changes the aspect ratio.
Uniform and UniformToFill keeps the original aspect ratio, where with Uniform you might have borders on 2 sides, and UniformToFill might clip the image on two sides.

 

[ge2301]

@osre
I tried to build a solution with your adapted code for the main menu
Unfortunately below code does also not work, is causes some errors.

Do you have an idea how I can define the width based on the active view?

• audio --> 560
• NOT audio --> 720
• Coverview --> not visible (this is working)

Here what I tried based on your modifications (The guid is the one for audio):

        <Control Grid.Column="1" VerticalAlignment="Stretch" Width="520"
          Template="{Binding Source={DynamicResource Media_Details_Template}}">
          <Control.IsVisible>
            <Binding Source="{StaticResource ViewModeModel}" Path="LayoutType" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} != {LayoutType}.{CoverLayout}"/>
            <Binding Source="{StaticResource MenuModel}" Path="AdditionalProperties[Id]" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} == {AdditionalProperties[Id]}.{30715D73-4205-417f-80AA-E82F0834171F}"/>
          </Control.IsVisible>
        </Control>
      
        <Control Grid.Column="1" VerticalAlignment="Stretch" Width="720"
          Template="{Binding Source={DynamicResource Media_Details_Template}}">
          <Control.IsVisible>
            <Binding Source="{StaticResource ViewModeModel}" Path="LayoutType" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} != {LayoutType}.{CoverLayout}"/>
            <Binding Source="{StaticResource MenuModel}" Path="AdditionalProperties[Id]" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} != {AdditionalProperties[Id]}.{30715D73-4205-417f-80AA-E82F0834171F}"/>
          </Control.IsVisible>
        </Control>

 

[osre]

Not fully sure how the ExpressionValueConverter works exactly, but I would guess the ConverterParameter might to have to look like:
ConverterParameter="{}{0} == {30715D73-4205-417f-80AA-E82F0834171F}
Also check in the curly braces are really in the value, and if it's upper or lower case.

What errors do you get exactly?

It also might be possible to just change the Width by a style.

 

[ge2301]

ConverterParameter="{}{0} == {30715D73-4205-417f-80AA-E82F0834171F}

Results in the same error:
[2015-03-01 15:25:52,538] [7750 ] [InputMgr ] [ERROR] - WorkflowManager.NavigatePushInternal: Error in workflow model or screen
MediaPortal.Utilities.Exceptions.EnvironmentException: Error showing screen 'AudioShowItems'
bei MediaPortal.UI.Services.Workflow.WorkflowManager.UpdateScreen_NeedsLock(Boolean push, Boolean force)
bei MediaPortal.UI.Services.Workflow.WorkflowManager.NavigatePushInternal(Guid stateId, NavigationContextConfig config)

A style could be also an option I want to keep the code as easy as possible.

 

[ge2301]

Finally I updated the main menu style and removed the 2 bars visualizing the focused menu item
Now the focused item is shown with 100% opacity (white) and the nonfocused items are shown with 40% opacity (light blue-grey).
The selected item is always known, because the description text is shown.

Example: TV is selected, so the description text shows "TV". Afterwards the focus changed to audio (100% opacity) without influencing the description text, because TV is still selected.


I pushed the changes to GitHib and also update the download version (v0.3) in second post.

(1)
@osre proposed to reduce the amount of necessary "clicks"/"button presses" to reach somewhere and I think it's a good proposal.
In next step I want to change the menu in the direction, that no "click"/"button press" is necessary to change the view, means changing the focus is changing the view directly.
I played a lot with the code, but could not find a way to change the behaviour. I guess apart from the xaml there is a general model thats seperates "IsPressed" and "Focused" events for menu items.

(2) EDIT:
When switching back to the main menu by "up button" or similar, the focused item is which is close from position point of view (E.g. focus in on TV picture -> pressung "up button" brings the focus to power button, since it's located just on top)
To make the menu work well, the focus should automatically go to the last selected menu item, when reentering the main menu.

@osre @morpheus_xx , could one of you have a look on (1) and (2) as dev Thanks!

 

[osre]

Currently the command of the group menu item switches the view.
This would have to be changed to the SelectionChanged event.
What you could do is adding an EventTrigger to the ItemsControl of the group menu, and add an CommandTrigger to the same command as the group item.
This is the method HomeMenuModel.SetGroup(string groupName).
The command trigger needs to have 1 parameter, which is the name (display name) of the selected item.
The SetGroup method is private, so it might not work without changing this.

 

[ge2301]

Currently the command of the group menu item switches the view

The command is that one from below code, right?

  <Style x:Key="HomeGroupMenuItemContainerStyle" BasedOn="{ThemeResource DefaultItemContainerStyle}">
  <Setter Property="Template">
  <Setter.Value>
  <ControlTemplate TargetType="{x:Type ListViewItem}">
  <Button Style="{ThemeResource GroupTabHeaderButtonStyle}" Margin="0,0,16,16"
  Command="{DynamicResource ResourceKey=Menu_Command}"
  IsEnabled="{Binding Enabled}" SetFocus="{Binding Path=Focused,Mode=OneTime}">
  </Button>
  </ControlTemplate>
  </Setter.Value>
  </Setter>
  </Style>

This would have to be changed to the SelectionChanged event.

Understandable, but I can not even see, based on what the command is activated by above code

This is the method HomeMenuModel.SetGroup(string groupName).

Here I'm out Is this part of MenuModel.cs? If so and it's related to c# code, I'm at my wit's end

 

[osre]

I'll play around with it (probably this or next evening) and let you know if/how it works.