Blue Vision (5 Viewers)

[morpheus_xx]

I'm afraid that I won't have time before my vacation...

But I have an idea how to add fitting shadows to home tiles of different sizes:
Can you create shadow images for common sizes (column and rowspans)? We then can build custom image names using MultiBinding like shadow_3_2.png, the required properties are exposed by the tile items.

 

[osre]

I'm also very busy with my daytime job. A lot of colleges want to have things finished before I leave for my vacation in early June.
Now that I've been a week sick at home, I have even less time left.

 

[morpheus_xx]

if you find some minutes, could you take a look on this. I tried about 4 hours in last days to fix the issue from above screenshot, I can not make it work Once the problem is fixed I can easily complete the skin.

Can you please explain what you want to achieve? Do you want site list only with logos, no title and no description?

From your attached skin files it looks to me that you have copied too much, which makes changes more complicated.

Please revise the ListView controls and templates. I think you are trying to modify style in the wrong place. The added "<Border ..." inside the NewsFeedDataTemplate is not the best place.

You have extended the ListViewStyle by "<Setter Property="ItemContainerStyle" Value="{ThemeResource MediaItemCoverWithContextMenuContainerStyle}" />", which is a step into right direction. It basically contains a custom button style:
<Style x:Key="MediaItemCoverWithContextMenuContainerStyle" BasedOn="{ThemeResource DefaultItemContainerStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Button Style="{ThemeResource MediaItemButtonCoverStyle}"
Command="{DynamicResource ResourceKey=Menu_Command}"
IsEnabled="{Binding Enabled}" SetFocus="{Binding Path=Selected,Mode=OneTime}">

This why I wrote above about the button styles:

A generic approach would be to make the ButtonWideStyle the one with framed focus. If I understand correctly, there are two different main styles: one for media items and one for all others.

So the choice is probably designing the more generic one first (ButtonStyle, ButtonWideStyle), so it applies to all buttons as default. And then use custom styles only in the places you like to make looking differently.

I'd recommend to:

1. apply the highlight border for one basic button style ("main buttons")
   
2. then define one button style for the media items.
3. if we need an addtional button style (i.e. contents menu buttons) this would be another style.

As all skins / screens /styles use the default buttons (if not specified other way!), the point 1 is the key to define the global button style.

 

[morpheus_xx]

@ge2301 I've pushed few fixes ("mask" definition, invalid rowspan) and changed the lastest media model to async loading of the MediaItems. The latter helps to keep navigation possible while items are loaded.

So, time for vacation now

 

[azzuro]

Good vacation morpheus.

 

[ge2301]

But I have an idea how to add fitting shadows to home tiles of different sizes:
Can you create shadow images for common sizes (column and rowspans)? We then can build custom image names using MultiBinding like shadow_3_2.png, the required properties are exposed by the tile items.

That could be also an option. But it would be easier with the solution I have posted some time before: https://forum.team-mediaportal.com/threads/new-skin-bluevision.129477/page-41#post-1132739


I made a trial in the past and it worked well:

 <ControlTemplate x:Key="GridViewMovieItemTemplate">
   <Border Name="mask" Background="White" CornerRadius="{StaticResource MediumRadius}" BorderThickness="0" BorderBrush="Black"/>
    <Grid Width="{StaticResource MEDIA_POSTER_WIDTH}" Height="{StaticResource MEDIA_POSTER_HEIGHT}" Margin="3,2,3,2" HorizontalAlignment="Center" VerticalAlignment="Center">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="18"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="18"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="18"  />
          <RowDefinition Height="*"  />
          <RowDefinition Height="18"  />
       </Grid.RowDefinitions>
  
      <Image Grid.Row="0" Grid.Column="0" Stretch="Fill" Margin="0" Opacity="1" Source="corner.png" />
      <Image Grid.Row="1" Grid.Column="0" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0" Opacity="1" Source="piece.png" />
      <Image Grid.Row="2" Grid.Column="0" Stretch="Fill" Margin="0" Opacity="1" Source="corner.png" RenderTransformOrigin=".5,.5" >
        <Image.RenderTransform>
          <RotateTransform Angle="270" />
        </Image.RenderTransform>
      </Image>
      <Image Grid.Row="0" Grid.Column="1" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0" Opacity="1" Source="piece.png" />
      <Image Grid.Row="1" Grid.Column="1" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0" Opacity="1" Source="piece.png" />
      <Image Grid.Row="2" Grid.Column="1" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0" Opacity="1" Source="piece.png" />  
      <Image Grid.Row="0" Grid.Column="2" Stretch="Fill" Margin="0" Opacity="1" Source="corner.png" RenderTransformOrigin=".5,.5" >
        <Image.RenderTransform>
          <RotateTransform Angle="90" />
        </Image.RenderTransform>
      </Image>
      <Image Grid.Row="1" Grid.Column="2" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0" Opacity="1" Source="piece.png" />
      <Image Grid.Row="2" Grid.Column="2" Stretch="Fill" Margin="0" Opacity="1" Source="corner.png" RenderTransformOrigin=".5,.5"  >  
        <Image.RenderTransform>
          <RotateTransform Angle="180" />
        </Image.RenderTransform>
      </Image>
      </Grid>
    </Grid>
  </ControlTemplate>

Results in:

• Only 3 image tiles necessary (corner, center, side)
  
• Radius size can be adjusted by changing the Row/column height of corner cells

I just have to create correct shadow tiles and add it to code for next version.

 

[ge2301]

So, time for vacation now

Have a nice vacation! I won't travel in summer, cuz having the beach in front of my door

 

[ge2301]

Can you please explain what you want to achieve? Do you want site list only with logos, no title and no description?

Same as the posted screenshow, problem is just listview style is used instead of gridview style

• apply the highlight border for one basic button style ("main buttons")

• then define one button style for the media items.

• if we need an addtional button style (i.e. contents menu buttons) this would be another style.

I have tried this and could not succeed. I'll try again by time from beginning.

 

[ge2301]

I've pushed few fixes ("mask" definition, invalid rowspan)

Thanks, but I had to correct all masks again. I defined 3 types of radius sizes, you have overwritten everything with MediumRadius

 

[ge2301]

Version 0.7 is released: https://www.team-mediaportal.com/extensions/mp2-skins/blue-vision
Download link and changelog can be found in above link from now. I eliminted the download links from 2nd post in this thread.