locked
Opacity mask with constant angle RRS feed

  • Question

  • Hi

    I need header in the silverlight project looks like an image below

    I made it with opacity mask 

     

    <Grid x:Name="LayoutRoot" Background="#FFE5F4FB">

    <Border Height="60">

    <Border.Background>

    <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">

    <GradientStop Color="#FF186D89" Offset="0"/>

    <GradientStop Color="#FF00516C" Offset="0.98"/>

    <GradientStop Color="#FF4F4F4F" Offset="0.991236"/>

    <GradientStop Color="#FF007299" Offset="1"/>

    </LinearGradientBrush>

    </Border.Background>

    </Border>

    <Border BorderBrush="#05FFFFFF" Height="60">

    <Border.Background>

    <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">

    <GradientStop Color="#FF00516C" Offset="0"/>

    <GradientStop Color="#FF004258" Offset="0.98"/>

    <GradientStop Color="#FF5E5E5E" Offset="0.991236"/>

    <GradientStop Color="#FF006485" Offset="1"/>

    </LinearGradientBrush>

    </Border.Background>

    <Border.OpacityMask>

    <LinearGradientBrush EndPoint="2950,13.12" StartPoint="2940,13.2" SpreadMethod="Repeat" MappingMode="Absolute">

    <LinearGradientBrush.RelativeTransform>

    <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="2"/>

    </LinearGradientBrush.RelativeTransform>

    <GradientStop Color="Black"/>

    <GradientStop Offset="0.5" Color="Black"/>

    <GradientStop Color="#001B1B1B" Offset="0.5"/>

    <GradientStop Color="Transparent" Offset="1"/>

    </LinearGradientBrush>

    </Border.OpacityMask>

    </Border>

    </Grid>

    But in this example angle changes with window width change. How can I fix that? I need a static stripe angle

     

    Thursday, October 27, 2011 11:43 AM

Answers

  • I think this should do what you want. I removed the rotation transform and changed the endpoints to produce the rotation. The transform will be affected by the size change, but this method should not.

    		<Grid  Background="#FFE5F4FB" Margin="0,0,8,128">
    			<Border Height="60">
    				<Border.Background>
    					<LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
    						<GradientStop Color="#FF186D89" Offset="0"/>
    						<GradientStop Color="#FF00516C" Offset="0.98"/>
    						<GradientStop Color="#FF4F4F4F" Offset="0.991236"/>
    						<GradientStop Color="#FF007299" Offset="1"/>
    					</LinearGradientBrush>
    				</Border.Background>
    			</Border>
    			<Border BorderBrush="#05FFFFFF" Height="60" Margin="0,146">
    				<Border.Background>
    					<LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
    						<GradientStop Color="#FF00516C" Offset="0"/>
    						<GradientStop Color="#FF004258" Offset="0.98"/>
    						<GradientStop Color="#FF5E5E5E" Offset="0.991236"/>
    						<GradientStop Color="#FF006485" Offset="1"/>
    					</LinearGradientBrush>
    				</Border.Background>
    				<Border.OpacityMask>
    					<LinearGradientBrush EndPoint="10,2" StartPoint="0,0" SpreadMethod="Repeat" MappingMode="Absolute">
    						<GradientStop Color="Black"/>
    						<GradientStop Offset="0.5" Color="Black"/>
    						<GradientStop Color="#001B1B1B" Offset="0.5"/>
    						<GradientStop Color="Transparent" Offset="1"/>
    					</LinearGradientBrush>
    				</Border.OpacityMask>
    			</Border>
    		</Grid>
    


    • Proposed as answer by Chuck HaysModerator Thursday, October 27, 2011 5:05 PM
    • Marked as answer by devildev Friday, October 28, 2011 8:55 AM
    Thursday, October 27, 2011 5:05 PM
    Moderator

All replies

  • Hello devildev,

    in order to get a static stripe angle you might want to delete MappingMode="Absolute", which sets it back to its default value which is MappingMode="RelativeToBoundingBox".

    But then you get the problem, that the distance between the "stripes" variies depending on the width of the parent container.

    I would solve this problem with using a seperate Grid (not LayoutRoot), with a fixed width of e.g. 2400 and the HorizontalAlignment set to "right", so that it overlaps on the left side over UserControl. Additionally you might want to recreate the opacity mask for the border to get exactly the appearence you need for a width of 2400. But you can also reuse your existing object multiple times, like I did in the example provided below (which I guess is not the most performant solution, but it works):

    <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 x:Class="ConcstantAngleGradientLab.MainPage"
                 Height="480">
    
      <Grid x:Name="LayoutRoot"
            Background="White">
        <Grid Margin="-1392,0,0,0"
              Width="2400"
              HorizontalAlignment="Right">
          <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <Grid Background="#FFE5F4FB"
                Margin="0"
                Width="608">
    
            <Border Height="60">
              <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1"
                                     EndPoint="0.5,0">
                  <GradientStop Color="#FF186D89"
                                Offset="0" />
                  <GradientStop Color="#FF00516C"
                                Offset="0.98" />
                  <GradientStop Color="#FF4F4F4F"
                                Offset="0.991236" />
                  <GradientStop Color="#FF007299"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
            </Border>
            <Border BorderBrush="#05FFFFFF"
                    Height="60">
              <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1"
                                     EndPoint="0.5,0">
                  <GradientStop Color="#FF00516C"
                                Offset="0" />
                  <GradientStop Color="#FF004258"
                                Offset="0.98" />
                  <GradientStop Color="#FF5E5E5E"
                                Offset="0.991236" />
                  <GradientStop Color="#FF006485"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
              <Border.OpacityMask>
                <LinearGradientBrush EndPoint="4.917,0.219"
                                     StartPoint="4.9,0.22"
                                     SpreadMethod="Repeat">
                  <LinearGradientBrush.RelativeTransform>
                    <CompositeTransform CenterY="0.5"
                                        CenterX="0.5"
                                        Rotation="2" />
                  </LinearGradientBrush.RelativeTransform>
                  <GradientStop Color="Black" />
                  <GradientStop Offset="0.5"
                                Color="Black" />
                  <GradientStop Color="#001B1B1B"
                                Offset="0.5" />
                  <GradientStop Color="Transparent"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.OpacityMask>
            </Border>
          </Grid>
          <Grid Background="#FFE5F4FB"
                Margin="0"
                Width="608"
                Grid.Column="1">
            <Border Height="60">
              <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1"
                                     EndPoint="0.5,0">
                  <GradientStop Color="#FF186D89"
                                Offset="0" />
                  <GradientStop Color="#FF00516C"
                                Offset="0.98" />
                  <GradientStop Color="#FF4F4F4F"
                                Offset="0.991236" />
                  <GradientStop Color="#FF007299"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
            </Border>
            <Border BorderBrush="#05FFFFFF"
                    Height="60">
              <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1"
                                     EndPoint="0.5,0">
                  <GradientStop Color="#FF00516C"
                                Offset="0" />
                  <GradientStop Color="#FF004258"
                                Offset="0.98" />
                  <GradientStop Color="#FF5E5E5E"
                                Offset="0.991236" />
                  <GradientStop Color="#FF006485"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
              <Border.OpacityMask>
                <LinearGradientBrush EndPoint="4.917,0.219"
                                     StartPoint="4.9,0.22"
                                     SpreadMethod="Repeat">
                  <LinearGradientBrush.RelativeTransform>
                    <CompositeTransform CenterY="0.5"
                                        CenterX="0.5"
                                        Rotation="2" />
                  </LinearGradientBrush.RelativeTransform>
                  <GradientStop Color="Black" />
                  <GradientStop Offset="0.5"
                                Color="Black" />
                  <GradientStop Color="#001B1B1B"
                                Offset="0.5" />
                  <GradientStop Color="Transparent"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.OpacityMask>
            </Border>
          </Grid>
          <Grid Background="#FFE5F4FB"
                Margin="0"
                Width="608"
                Grid.Column="2">
            <Border Height="60">
              <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1"
                                     EndPoint="0.5,0">
                  <GradientStop Color="#FF186D89"
                                Offset="0" />
                  <GradientStop Color="#FF00516C"
                                Offset="0.98" />
                  <GradientStop Color="#FF4F4F4F"
                                Offset="0.991236" />
                  <GradientStop Color="#FF007299"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
            </Border>
            <Border BorderBrush="#05FFFFFF"
                    Height="60">
              <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1"
                                     EndPoint="0.5,0">
                  <GradientStop Color="#FF00516C"
                                Offset="0" />
                  <GradientStop Color="#FF004258"
                                Offset="0.98" />
                  <GradientStop Color="#FF5E5E5E"
                                Offset="0.991236" />
                  <GradientStop Color="#FF006485"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
              <Border.OpacityMask>
                <LinearGradientBrush EndPoint="4.917,0.219"
                                     StartPoint="4.9,0.22"
                                     SpreadMethod="Repeat">
                  <LinearGradientBrush.RelativeTransform>
                    <CompositeTransform CenterY="0.5"
                                        CenterX="0.5"
                                        Rotation="2" />
                  </LinearGradientBrush.RelativeTransform>
                  <GradientStop Color="Black" />
                  <GradientStop Offset="0.5"
                                Color="Black" />
                  <GradientStop Color="#001B1B1B"
                                Offset="0.5" />
                  <GradientStop Color="Transparent"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.OpacityMask>
            </Border>
          </Grid>
          <Grid Background="#FFE5F4FB"
                Margin="0"
                Width="608"
                Grid.Column="3">
            <Border Height="60">
              <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1"
                                     EndPoint="0.5,0">
                  <GradientStop Color="#FF186D89"
                                Offset="0" />
                  <GradientStop Color="#FF00516C"
                                Offset="0.98" />
                  <GradientStop Color="#FF4F4F4F"
                                Offset="0.991236" />
                  <GradientStop Color="#FF007299"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
            </Border>
            <Border BorderBrush="#05FFFFFF"
                    Height="60">
              <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1"
                                     EndPoint="0.5,0">
                  <GradientStop Color="#FF00516C"
                                Offset="0" />
                  <GradientStop Color="#FF004258"
                                Offset="0.98" />
                  <GradientStop Color="#FF5E5E5E"
                                Offset="0.991236" />
                  <GradientStop Color="#FF006485"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
              <Border.OpacityMask>
                <LinearGradientBrush EndPoint="4.917,0.219"
                                     StartPoint="4.9,0.22"
                                     SpreadMethod="Repeat">
                  <LinearGradientBrush.RelativeTransform>
                    <CompositeTransform CenterY="0.5"
                                        CenterX="0.5"
                                        Rotation="2" />
                  </LinearGradientBrush.RelativeTransform>
                  <GradientStop Color="Black" />
                  <GradientStop Offset="0.5"
                                Color="Black" />
                  <GradientStop Color="#001B1B1B"
                                Offset="0.5" />
                  <GradientStop Color="Transparent"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.OpacityMask>
            </Border>
          </Grid>
        </Grid>
      </Grid>
    </UserControl>
    

    So, as a result, any changes of the width of UserControl or the browser window doesn't affect the OpacityMask anymore.

    Best regards,

    Martin

     

    • Marked as answer by devildev Friday, October 28, 2011 9:02 AM
    • Unmarked as answer by devildev Friday, October 28, 2011 11:18 AM
    Thursday, October 27, 2011 4:59 PM
  • I think this should do what you want. I removed the rotation transform and changed the endpoints to produce the rotation. The transform will be affected by the size change, but this method should not.

    		<Grid  Background="#FFE5F4FB" Margin="0,0,8,128">
    			<Border Height="60">
    				<Border.Background>
    					<LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
    						<GradientStop Color="#FF186D89" Offset="0"/>
    						<GradientStop Color="#FF00516C" Offset="0.98"/>
    						<GradientStop Color="#FF4F4F4F" Offset="0.991236"/>
    						<GradientStop Color="#FF007299" Offset="1"/>
    					</LinearGradientBrush>
    				</Border.Background>
    			</Border>
    			<Border BorderBrush="#05FFFFFF" Height="60" Margin="0,146">
    				<Border.Background>
    					<LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
    						<GradientStop Color="#FF00516C" Offset="0"/>
    						<GradientStop Color="#FF004258" Offset="0.98"/>
    						<GradientStop Color="#FF5E5E5E" Offset="0.991236"/>
    						<GradientStop Color="#FF006485" Offset="1"/>
    					</LinearGradientBrush>
    				</Border.Background>
    				<Border.OpacityMask>
    					<LinearGradientBrush EndPoint="10,2" StartPoint="0,0" SpreadMethod="Repeat" MappingMode="Absolute">
    						<GradientStop Color="Black"/>
    						<GradientStop Offset="0.5" Color="Black"/>
    						<GradientStop Color="#001B1B1B" Offset="0.5"/>
    						<GradientStop Color="Transparent" Offset="1"/>
    					</LinearGradientBrush>
    				</Border.OpacityMask>
    			</Border>
    		</Grid>
    


    • Proposed as answer by Chuck HaysModerator Thursday, October 27, 2011 5:05 PM
    • Marked as answer by devildev Friday, October 28, 2011 8:55 AM
    Thursday, October 27, 2011 5:05 PM
    Moderator
  • Chuck,

    that is great. Simple and perfect.

    Best regards,

    Martin

    Friday, October 28, 2011 7:56 AM
  • Thanks for all. It's very helpful
    Friday, October 28, 2011 8:57 AM
  • Hello devildev,

    could you please unmark my post as answer. I mean, it works, but it is not the best solution, when I look at the answer of Chuck, my proposal is more something like a workaround.

    The best solution is definitely the answer of Chuck!

    Best regards,

    Martin

    Friday, October 28, 2011 9:31 AM