Reply to thread

Message

<blockquote data-quote="ge2301" data-source="post: 1132739" data-attributes="member: 145639">I had introduced a new popup dialog style by applying a blur to a blurred picture <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /> The result is visually attractive, just one problem is remaining and I try to solve it currently.In case the dialog window is very long, the blur effect is not stretched well (See screenshots).[ATTACH]163775[/ATTACH] [ATTACH]163776[/ATTACH]Current code for the blur:[HTML]&nbsp; &nbsp; &nbsp; &lt;Rectangle Fill=&quot;{ThemeResource DialogBorderBrush}&quot; RadiusY=&quot;{ThemeResource DialogBorderCornerRadius}&quot; RadiusX=&quot;{ThemeResource DialogBorderCornerRadius}&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Margin=&quot;-120,-85,-120,-80&quot; VerticalAlignment=&quot;Stretch&quot; HorizontalAlignment=&quot;Stretch&quot; Opacity=&quot;0.9&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;Rectangle.Fill&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ImageBrush ImageSource=&quot;blur.png&quot; Stretch=&quot;Fill&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/Rectangle.Fill&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;Rectangle.Effect&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ZoomBlurEffect BlurAmount=&quot;0.1&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Rectangle.Effect&gt;&nbsp; &nbsp; &nbsp; &lt;/Rectangle&gt;[/HTML]I tried to devide the blur picture into 3 pieces, while only the middle piece is stretched vertically and all pieces are stretched horizontally.The blur effect is applied to the grid in the end. This would make the rounding of the blur aspect indedendent and it should look better.However the result is always following:[ATTACH]163777[/ATTACH]The pictures are not stretched correctly <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite3" alt=":(" title="Frown&nbsp; &nbsp; :(" loading="lazy" data-shortname=":(" />Here the code:[HTML]&nbsp; &nbsp; &nbsp; &lt;Grid Margin=&quot;-180,-85,-180,-80&quot; VerticalAlignment=&quot;Stretch&quot; HorizontalAlignment=&quot;Stretch&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;Grid.RowDefinitions&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;RowDefinition Height=&quot;Auto&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;RowDefinition Height=&quot;*&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;RowDefinition Height=&quot;Auto&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Grid.RowDefinitions&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;Grid.ColumnDefinitions&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ColumnDefinition Width=&quot;Auto&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Grid.ColumnDefinitions&gt;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Image Grid.Row=&quot;0&quot; Source=&quot;blur_top.png&quot;&nbsp; HorizontalAlignment=&quot;Stretch&quot; Opacity=&quot;0.9&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;Image Grid.Row=&quot;1&quot; Source=&quot;blur_mid.png&quot; VerticalAlignment=&quot;Stretch&quot; HorizontalAlignment=&quot;Stretch&quot; Opacity=&quot;0.9&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;Image Grid.Row=&quot;2&quot; Source=&quot;blur_bot.png&quot;&nbsp; HorizontalAlignment=&quot;Stretch&quot; Opacity=&quot;0.9&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;Grid.Effect&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ZoomBlurEffect BlurAmount=&quot;0.1&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Grid.Effect&gt; &nbsp; &nbsp; &nbsp; &lt;/Grid&gt;[/HTML]Does anyone have an idea?</blockquote>

[QUOTE="ge2301, post: 1132739, member: 145639"] I had introduced a new popup dialog style by applying a blur to a blurred picture :) The result is visually attractive, just one problem is remaining and I try to solve it currently. In case the dialog window is very long, the blur effect is not stretched well (See screenshots). [ATTACH]163775[/ATTACH] [ATTACH]163776[/ATTACH] Current code for the blur: [HTML] <Rectangle Fill="{ThemeResource DialogBorderBrush}" RadiusY="{ThemeResource DialogBorderCornerRadius}" RadiusX="{ThemeResource DialogBorderCornerRadius}" Margin="-120,-85,-120,-80" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Opacity="0.9"> <Rectangle.Fill> <ImageBrush ImageSource="blur.png" Stretch="Fill"/> </Rectangle.Fill> <Rectangle.Effect> <ZoomBlurEffect BlurAmount="0.1" /> </Rectangle.Effect> </Rectangle>[/HTML] I tried to devide the blur picture into 3 pieces, while only the middle piece is stretched vertically and all pieces are stretched horizontally. The blur effect is applied to the grid in the end. This would make the rounding of the blur aspect indedendent and it should look better. However the result is always following: [ATTACH]163777[/ATTACH] The pictures are not stretched correctly :( Here the code: [HTML] <Grid Margin="-180,-85,-180,-80" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Image Grid.Row="0" Source="blur_top.png" HorizontalAlignment="Stretch" Opacity="0.9"/> <Image Grid.Row="1" Source="blur_mid.png" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Opacity="0.9" /> <Image Grid.Row="2" Source="blur_bot.png" HorizontalAlignment="Stretch" Opacity="0.9"/> <Grid.Effect> <ZoomBlurEffect BlurAmount="0.1" /> </Grid.Effect> </Grid>[/HTML] Does anyone have an idea? [/QUOTE]

Verification