I have following XAML:
<StackPanel Orientation="Vertical">
<Canvas Width="100" Height="100">
<Border Width="100" Height="100">
<Border.Background>
<LinearGradientBrush MappingMode="Absolute" StartPoint="-10,10" EndPoint="10,0" SpreadMethod="Repeat">
<GradientStop Color="Blue" Offset="4"/>
<GradientStop Color="Red"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Polyline Points="0,0 10,10 50,10 90,60" Stroke="Black" StrokeThickness="4"/>
</Canvas>
<Canvas Width="100" Height="100">
<Border Width="100" Height="100">
<Border.Background>
<LinearGradientBrush MappingMode="Absolute" StartPoint="-10,10" EndPoint="10,0"
SpreadMethod="Pad">
<GradientStop Color="Blue" Offset="4"/>
<GradientStop Color="Red"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Polyline Points="0,0 10,10 50,10 90,60" Stroke="Black" StrokeThickness="4"/>
</Canvas>
</StackPanel>
and it looks like:
When I put SpreadMethod="Repeat" on a LinearGradientBrush, it makes all UIelements over the brush, half-transparent. Is this a bug?, how can I fix this?
(It is more weird, if I give the polyline a fill color, it's stroke gets hard black)
Both target and min versions of the project are Windows 10 Fall Creators Update (10.0; build 16299). IDE is VS2017.
Related
I have a carousel from microsoft.toolkit
XAML:
<controls:Carousel
x:Name="k2006Carousel"
VerticalAlignment="Center"
ItemDepth="300"
ItemMargin="0"
ItemRotationX="0"
ItemRotationY="-40"
ItemRotationZ="0"
Orientation="Horizontal"
SelectionChanged="bukuCarousel_SelectionChanged">
<controls:Carousel.EasingFunction>
<CubicEase EasingMode="EaseInOut" />
</controls:Carousel.EasingFunction>
<controls:Carousel.ItemTemplate>
<DataTemplate>
-->
<!-- Carousel content -->
<!--
<Grid x:Name="k2006CarouselGrid" Background="{x:Null}">
<Grid PointerPressed="BukuUIElement_OnPointerPressed">
<Image
x:Name="cover"
Width="280"
Margin="0,10,0,10"
HorizontalAlignment="Center"
Source="{Binding Image}"
Stretch="Uniform" />
</Grid>
<Rectangle
Grid.Row="1"
Height="140"
Margin="0,0,0,-130"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#801B1B1B" />
<GradientStop Offset="0.259" Color="#661B1B1B" />
<GradientStop Offset="0.681" Color="Transparent" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
From the xaml above, the output is like the image below:
I want the margin between items to be 0 (no margin), like the image below:
How to apply it?
For your requirement, you could set suitable negative value for ItemMargin.
ItemMargin="-150"
I have a LinearGradientBrush and am trying to apply the RotateTransform offset to it. With this code, it rotates and keeps still at the angle I give it:
<LinearGradientBrush.Transform>
<RotateTransform CenterX="60" CenterY="30" Angle="45" />
</LinearGradientBrush.Transform>
Is there a way to make the "Angle" dynamic so the brush will spin at 180 degrees?
You can run a DoubleAnimation on the Angle property of the RotateTransform, like in the example below, where the LinearGradientBrush fills a Rectangle, and the the animation is started when the Rectangle is loaded, and then runs forever:
<Rectangle Width="300" Height="300">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
<LinearGradientBrush.Transform>
<RotateTransform CenterX="150" CenterY="150"/>
</LinearGradientBrush.Transform>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Fill.Transform.Angle"
To="360" Duration="0:0:5" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
how can put the below style property into style , setter
<StackPanel >
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF707070"/>
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
it thing it may like
<Style TargetType="StackPanel" x:Key="Psp">
<Setter Property="Background" Value="Black" ></Setter>
<Setter Property="Background">
<Setter.Value >
<StackPanel >
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF707070"/>
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
</Setter.Value>
</Setter>
</Style>
it giving error on <Setter.Value >
Specified value cannot be assigned, the following type is expected
"Brush"
<StackPanel Grid.Row="1" Style="{StaticResource Psp}">
<TextBlock Text="This is a test"></TextBlock>
</StackPanel>
In your app.xaml
<Application.Resources>
<Style TargetType="StackPanel" x:Key="Psp">
<Setter Property="Background" Value="Black" ></Setter>
<Setter Property="Background">
<Setter.Value >
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF707070"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
In your page
<StackPanel Grid.Row="1" Style="{StaticResource Psp}">
<TextBlock Text="This is a test"></TextBlock>
</StackPanel>
You can obviously define the style on the page level or control level too.
Thanks every i have solve this problem
<Style TargetType="StackPanel" x:Key="Psp">
<Setter Property="Margin" Value="5,5,3,5" />
<Setter Property="Height" Value="40"/>
<Setter Property="Background" Value="{StaticResource Brushh}" ></Setter>
</Style>
<LinearGradientBrush x:Key="Brushh" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF707070"/>
</LinearGradientBrush>
I had set the Height of the ScrollViewer but it won't scroll. There are 9 images. The Wrappanel is set to show 2 images per row. But this shows only 3 row ( 6 images). What seems to be the problem?
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Height="500">
<toolkit:WrapPanel Margin="-3,-20,12,-3" Background="White" ItemHeight="200" Orientation="Horizontal" ItemWidth="200" Height="600" Width="480" FlowDirection="LeftToRight">
<Image Height="160" Name="image11" Source="/ImgBadges/Badge_1.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image12" Source="/ImgBadges/Badge_2.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image13" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image14a" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image15b" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image16c" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image17d" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image18e" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image19f" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
</toolkit:WrapPanel>
</ScrollViewer>
You have forced the height of the WrapPanel to 600. Change the height to be set onto the only on the ScrollViewer, so that the WrapPanel can have infinite space to add more items, while scrolling:
<ScrollViewer Height="500" ...>
<toolkit:WrapPanel ItemHeight="200" Orientation="Horizontal" ItemWidth="200" Width="480" FlowDirection="LeftToRight">
...
</toolkit:WrapPanel>
</ScrollViewer>
Summary: remove the height from the WrapPanel, so that more items can be added to it.
I have created a custom canvas which I would need to stretch behind two textblocks.
Heres the entire code
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Canvas HorizontalAlignment="Stretch" Height="45" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<Rectangle Height="30" Stroke="Black" Width="70" RadiusY="17.167" RadiusX="17.167" Canvas.Top="15">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF096016"/>
<GradientStop Color="#FF0FEF6F" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Ellipse Height="5" Width="5" RenderTransformOrigin="0.5,0.45" Fill="White" Stroke="Gray" Canvas.ZIndex="2" Canvas.Left="33"/>
<Ellipse Height="5" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A" Canvas.Left="17" Canvas.Top="18"/>
<Ellipse Height="5" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A" Canvas.Left="48" Canvas.Top="18"/>
<Path Data="M143.5,193.5 C127.75,210.5 127.75,210.5 127.75,210.5" Height="17" Stretch="Fill" UseLayoutRounding="False" Width="15.75" Canvas.Left="19.75" Canvas.Top="3.5"/>
<Path Data="M128,209 L141.99998,192.16666" Height="17.833" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" Width="15" Canvas.Left="20" Canvas.Top="2.167"/>
<Path Data="M143.5,192.16699 L158.08334,210.25" Height="19.083" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" Width="15.583" Canvas.Left="35.5" Canvas.Top="2.167"/>
</Canvas>
<TextBlock Height="30" Margin="0,20,0,0" TextAlignment="Right" Name="priceTextblock" Text="{Binding Price}" VerticalAlignment="Top" FontFamily="Calibri" FontWeight="Bold"/>
<TextBlock Width="50" Margin="5,20,0,0" Height="30" TextAlignment="Left" Name="currencyTextblock" Text="{Binding SelectedCurrency.code}" VerticalAlignment="Top" Grid.Column="1" FontFamily="Calibri" FontWeight="Bold"/>
</Grid>
though the horizontal alignment is set to stretch nothing is happening. What am I missing, please help.
Thanks in advance
EDITS
Using Grid instead of canvas
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" Height="45" VerticalAlignment="Top" Width="70">
<Rectangle Margin="0,15,0,0" Stroke="Black" RadiusY="17.167" RadiusX="17.167">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF096016"/>
<GradientStop Color="#FF0FEF6F" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Ellipse Height="5" Margin="33,0,32,0" VerticalAlignment="Top" Stroke="Gray" RenderTransformOrigin="0.5,0.45" Fill="White" Canvas.ZIndex="2"/>
<Ellipse HorizontalAlignment="Left" Margin="17,18,0,22" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A"/>
<Ellipse HorizontalAlignment="Right" Margin="0,18,17,22" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A"/>
<Path Data="M143.5,193.5 C127.75,210.5 127.75,210.5 127.75,210.5" Height="17" Margin="19.75,3.5,34.5,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top"/>
<Path Data="M128,209 L141.99998,192.16666" HorizontalAlignment="Left" Height="17.833" Margin="20,2.167,0,0" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" VerticalAlignment="Top" Width="15"/>
<Path Data="M143.5,192.16699 L158.08334,210.25" HorizontalAlignment="Right" Height="19.083" Margin="0,2.167,18.917,0" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" VerticalAlignment="Top" Width="15.583"/>
</Grid>
<TextBlock Height="30" Margin="0,20,0,0" TextAlignment="Right" Name="priceTextblock" Text="{Binding Price}" VerticalAlignment="Top" FontFamily="Calibri" FontWeight="Bold"/>
<TextBlock Width="50" Margin="5,20,0,0" Height="30" TextAlignment="Left" Name="currencyTextblock" Text="{Binding SelectedCurrency.code}" VerticalAlignment="Top" Grid.Column="1" FontFamily="Calibri" FontWeight="Bold"/>
</Grid>
You need to set column width to *. It tells to get all available space
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>