Reply to thread

Message

<blockquote data-quote="ge2301" data-source="post: 1132748" data-attributes="member: 145639">I could solve another issue, that annoyed me long time <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite8" alt=":D" title="Big Grin&nbsp; &nbsp; :D" loading="lazy" data-shortname=":D" /> So far depending on the aspect ratio and size differnt png-files are used as masks to create rounded corners for covers and fanarts.This is necessary to avoid distorted corners.Be creating a border as mask and applying it with a visualbrush on the grid's opacity, this can by done simply and aspect and size independent! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /> I'll update the complete code of BV accordingly.Example of current code[HTML]&lt;ControlTemplate x:Key=&quot;GridViewMovieItemTemplate&quot;&gt;&nbsp; &nbsp; &lt;Grid Margin=&quot;3,2,3,2&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;Grid Width=&quot;{StaticResource MEDIA_POSTER_WIDTH}&quot; Height=&quot;{StaticResource MEDIA_POSTER_HEIGHT}&quot; OpacityMask=&quot;{ThemeResource MediaItemsOpacityBrush}&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;Image&nbsp; HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot; Stretch=&quot;Fill&quot; FallbackSource=&quot;VideoLarge.png&quot; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Image.Source&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;fanart:FanArtImageSource fanart:FanArtMediaType=&quot;Movie&quot; fanart:FanArtType=&quot;Poster&quot; fanart:FanArtName=&quot;{Binding MediaItem.MediaItemId}&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; fanart:MaxWidth=&quot;{StaticResource FANART_POSTER_WIDTH}&quot; fanart:MaxHeight=&quot;{StaticResource FANART_POSTER_HEIGHT}&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Image.Source&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Image&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;Image HorizontalAlignment=&quot;Left&quot; VerticalAlignment=&quot;Top&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Image.Source&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;MultiBinding Converter=&quot;{StaticResource ExpressionMultiValueConverter}&quot; ConverterParameter=&quot;{}{0} == 0 ? {1} : {2}&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Binding Path=&quot;PlayCount&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Binding Source=&quot;UnwatchedTab_small.png&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Binding Source=&quot;&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/MultiBinding&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Image.Source&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Image&gt;&nbsp; &nbsp; &nbsp; &lt;/Grid&gt;&nbsp; &nbsp; &lt;/Grid&gt;&nbsp; &lt;/ControlTemplate&gt;[/HTML]Example of new code:[HTML] &lt;ControlTemplate x:Key=&quot;GridViewMovieItemTemplate&quot;&gt;&nbsp; &nbsp; &lt;Border Name=&quot;mask&quot; Background=&quot;White&quot; CornerRadius=&quot;15&quot; BorderThickness=&quot;0&quot; BorderBrush=&quot;Black&quot; /&gt;&nbsp; &nbsp; &lt;Grid Width=&quot;{StaticResource MEDIA_POSTER_WIDTH}&quot; Height=&quot;{StaticResource MEDIA_POSTER_HEIGHT}&quot; Margin=&quot;3,2,3,2&quot; HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;Grid.OpacityMask&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;VisualBrush Visual=&quot;{Binding ElementName=mask}&quot;/&gt;&nbsp; &nbsp; &nbsp; &lt;/Grid.OpacityMask&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;Image&nbsp; HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot; Stretch=&quot;Fill&quot; FallbackSource=&quot;VideoLarge.png&quot; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Image.Source&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;fanart:FanArtImageSource fanart:FanArtMediaType=&quot;Movie&quot; fanart:FanArtType=&quot;Poster&quot; fanart:FanArtName=&quot;{Binding MediaItem.MediaItemId}&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; fanart:MaxWidth=&quot;{StaticResource FANART_POSTER_WIDTH}&quot; fanart:MaxHeight=&quot;{StaticResource FANART_POSTER_HEIGHT}&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Image.Source&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Image&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;Image HorizontalAlignment=&quot;Left&quot; VerticalAlignment=&quot;Top&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Image.Source&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;MultiBinding Converter=&quot;{StaticResource ExpressionMultiValueConverter}&quot; ConverterParameter=&quot;{}{0} == 0 ? {1} : {2}&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Binding Path=&quot;PlayCount&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Binding Source=&quot;UnwatchedTab_small.png&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Binding Source=&quot;&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/MultiBinding&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Image.Source&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Image&gt;&nbsp; &nbsp; &lt;/Grid&gt;&nbsp; &lt;/ControlTemplate&gt;[/HTML]</blockquote>

[QUOTE="ge2301, post: 1132748, member: 145639"] I could solve another issue, that annoyed me long time :D So far depending on the aspect ratio and size differnt png-files are used as masks to create rounded corners for covers and fanarts. This is necessary to avoid distorted corners. Be creating a border as mask and applying it with a visualbrush on the grid's opacity, this can by done simply and aspect and size independent! :) I'll update the complete code of BV accordingly. Example of current code [HTML]<ControlTemplate x:Key="GridViewMovieItemTemplate"> <Grid Margin="3,2,3,2"> <Grid Width="{StaticResource MEDIA_POSTER_WIDTH}" Height="{StaticResource MEDIA_POSTER_HEIGHT}" OpacityMask="{ThemeResource MediaItemsOpacityBrush}"> <Image HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" FallbackSource="VideoLarge.png" > <Image.Source> <fanart:FanArtImageSource fanart:FanArtMediaType="Movie" fanart:FanArtType="Poster" fanart:FanArtName="{Binding MediaItem.MediaItemId}" fanart:MaxWidth="{StaticResource FANART_POSTER_WIDTH}" fanart:MaxHeight="{StaticResource FANART_POSTER_HEIGHT}"/> </Image.Source> </Image> <Image HorizontalAlignment="Left" VerticalAlignment="Top"> <Image.Source> <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0} == 0 ? {1} : {2}"> <Binding Path="PlayCount"/> <Binding Source="UnwatchedTab_small.png"/> <Binding Source=""/> </MultiBinding> </Image.Source> </Image> </Grid> </Grid> </ControlTemplate>[/HTML] Example of new code: [HTML] <ControlTemplate x:Key="GridViewMovieItemTemplate"> <Border Name="mask" Background="White" CornerRadius="15" 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.OpacityMask> <VisualBrush Visual="{Binding ElementName=mask}"/> </Grid.OpacityMask> <Image HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" FallbackSource="VideoLarge.png" > <Image.Source> <fanart:FanArtImageSource fanart:FanArtMediaType="Movie" fanart:FanArtType="Poster" fanart:FanArtName="{Binding MediaItem.MediaItemId}" fanart:MaxWidth="{StaticResource FANART_POSTER_WIDTH}" fanart:MaxHeight="{StaticResource FANART_POSTER_HEIGHT}"/> </Image.Source> </Image> <Image HorizontalAlignment="Left" VerticalAlignment="Top"> <Image.Source> <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0} == 0 ? {1} : {2}"> <Binding Path="PlayCount"/> <Binding Source="UnwatchedTab_small.png"/> <Binding Source=""/> </MultiBinding> </Image.Source> </Image> </Grid> </ControlTemplate>[/HTML] [/QUOTE]

Verification