I have the following xaml :
<Canvas Name="MainCanvas" Style="{StaticResource MainCanvasStyle}">
<ListView Name="MainListView" Style="{StaticResource MainListViewStyle}" ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Status}" Value="dnd">
<Setter TargetName="CanvasItem" Property="Canvas.Background" Value="Orange"/>
</DataTrigger>
</DataTemplate.Triggers>
<Canvas Name="CanvasItem" Height="30" Width="222" Margin="10,5,10,5">
<Canvas.Background>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Orange"/>
<GradientStop Offset="1" Color="{Binding Background, ElementName=CanvasItem}"/>
</LinearGradientBrush>
</Canvas.Background>
<TextBlock Text="{Binding Number}" TextAlignment="Justify" FontSize="18" Width="150" Canvas.Top="2" Canvas.Left="10" FontWeight="Thin"/>
<TextBlock Text="{Binding Status}" TextAlignment="Right" FontSize="18" Width="50" Canvas.Top="2" Canvas.Right="5" FontWeight="DemiBold"/>
</Canvas>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Canvas>
What I'm trying to achieve is to have the second color of LinearGradientBrush in CanvasItems change depending on the current value of Items.Status.
I'd like to acomplish that by targeting the Colors inside LinearGradientBrush in CanvasItem in my setter. How could that be done?
If there are better ways of doing this then I'm open to suggestions.
Another idea I had was to handle in my ViewModel, but I'm not sure if binding them to this ListView would be possible, as my ItemsSource is already set to Items, and I don't want to modify the class that holds those.
/// While the question remains unanswered, I managed to get this to work like described by changing the Setter part to :
<Setter TargetName="CanvasItem" Property="Canvas.Background">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Orange"/>
<GradientStop Offset="1" Color="Red"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
I also deleted the part with Canvas.Background in CanvasItem.
This requires me to copy and paste that snippet into every single setter which isn't as comfortable as referencing the exact color in the setter (the one in second GradientStop). There are about ten different color setters in my code so you can imagine how clumsy that looks like.
Hmm...you can't bind the Color of a GradientStop to the same LinearGradientBrush that the GradientStop belongs to if that's what you are trying to do.
You could bind to another property though. You could either use the Tag property or define your own attached Brush property:
<DataTemplate>
<Canvas Name="CanvasItem" Height="30" Width="222" Margin="10,5,10,5">
<!-- default value -->
<Canvas.Tag>
<SolidColorBrush>Green</SolidColorBrush>
</Canvas.Tag>
<Canvas.Background>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Orange"/>
<GradientStop Offset="1" Color="{Binding Tag.Color, ElementName=CanvasItem}"/>
</LinearGradientBrush>
</Canvas.Background>
<TextBlock Text="Number" TextAlignment="Justify" FontSize="18" Width="150" Canvas.Top="2" Canvas.Left="10" FontWeight="Thin"/>
<TextBlock Text="Status" TextAlignment="Right" FontSize="18" Width="50" Canvas.Top="2" Canvas.Right="5" FontWeight="DemiBold"/>
</Canvas>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Status}" Value="dnd">
<Setter TargetName="CanvasItem" Property="Tag">
<Setter.Value>
<SolidColorBrush>Orange</SolidColorBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
I don't follow what your intention is here so I don't know whether this is a good idea or not.
But you seem to want to do it so...
You can name a colour in a gradientstop:
<LinearGradientBrush>
<GradientStop Offset="0" Color="Orange"/>
<GradientStop Offset="1">
<GradientStop.Color x:Name="MyColour">Red</GradientStop.Color>
</GradientStop>
</LinearGradientBrush>
Maybe that lineargradient could be a resource or use a dynamicresource colour and you change that out using a trigger if this is used in numerous placed.
Path syntax is really fiddly to do manually and some prefer to use blend for that sort of thing. Far less headaches. As I said, I don't really follow what you want to do here so I don't know what should be set by what from where.
Here's an example of what one looks like though:
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
Which is referencing the rotatetransform in this:
<ContentControl.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ContentControl.RenderTransform>
Related
I need my component to have a border that is dark closer to the component and then it fades out going away. DropShadowEffect appears on two side only (right and lower) while I want it on all four sides.
Here's what I need
While I currently have something like,
And here's my current code,
<Border x:Name="ShadowBorder" BorderThickness="1" Width="242" Height="280" Margin="5,5,5,5">
<Border.BorderBrush>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5">
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="LightBlue" Offset="1"/>
</RadialGradientBrush>
</Border.BorderBrush>
</Border>
You were on the right track using DropShadowEffect. The reason why it only blurred on two sides was because of your ShadowDepth. Set it to 0, and you will get what you want.
<Border x:Name="ShadowBorder" BorderThickness="1" Width="242" Height="280" Margin="5,5,5,5" Background="#00FFFFFF">
<Rectangle Fill="White" Width="242" Height="280"/>
<Border.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="LightBlue"/>
</Border.Effect>
</Border>
Here's what it will look like:
I'm working on a GUI where the user can place items on a canvas as he wishes and work with those items. Currently I solved this with an ItemsControl as follows:
<ItemsControl ItemsSource="{Binding PlacementConfiguration.EquipmentPlacementList}" Background="AliceBlue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding Position.X}"/>
<Setter Property="Canvas.Top" Value="{Binding Position.Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="150" Height="100" BorderThickness="3">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0" >
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Black" Offset="0.1"/>
<GradientStop Color="Transparent" Offset="0.1"/>
<GradientStop Color="Transparent" Offset="0.9"/>
<GradientStop Color="Black" Offset="0.9"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Label Content="TestLabel, Content will be presented here!"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
So the items are bound to a collection in the viewmodel. Each item is represented by a class instance with several properties and option. The issue with the solution above is that ItemsControl items are not selectable, which is a functionality I need.
The solution i thought was either that there is an alternative to ItemsControl that gives me the same freedom while at the same time having the ability to make items selectable, or to solve it manually using different mouse events.
Question, which solution is more feasible...or maybe if there is a completely other (better) way to go about such a issue.
First of all thank you for reading this.
I have the following problem:
I want the labels of my X-axis te be turned 90 degrees. So that the text is facing vertical instead of horizontal. My X-axis is generated automatic, but it doesn't have to be.
So that the content of the label is vertical instead of horizontal. I've tried multiple options to achieve this but none of them worked for me yet. So I really hope anybody has a clue on how to get this working. With the options I tried there was just another axis that showed up with numbers only. While the thing what I want is the labels to be turned so that all of the text fits on the axis without overlapping eachother.
The image below is the way it is right now:
And here is an example of how i would like it to be (this is made in excel):
I have looked around at more sites but i cant find one that is working for me.
Both in xaml or in the code behind are fine for me.
This is the code i am using now:
<toolkit:Chart Margin="8,72,0,8" Title="Aantal meldingen per afdeling" x:Name="chartMeldingenPerAfdeling">
<toolkit:Chart.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FF476D88" Offset="1"/>
</LinearGradientBrush>
</toolkit:Chart.Background>
<toolkit:ColumnSeries ItemsSource="{Binding}" DependentValuePath="AantalMeldingen"
IndependentValuePath="Afdeling" Margin="0,0,0,1"
Title="Aantal meldingen" Padding="0" VerticalContentAlignment="Center"
HorizontalContentAlignment="Center" FontSize="8"/>
<toolkit:LineSeries ItemsSource="{Binding}" DependentValueBinding="{Binding Percentage}" DependentRangeAxis="{Binding ElementName=PercentageAxis}"
IndependentValueBinding="{Binding Afdeling}" IndependentAxis="{Binding ElementName=lin}" Title="Pareto"/>
<toolkit:Chart.Axes>
<toolkit:LinearAxis Orientation="Y" Location="Left" Title="Aantal" x:Name="AantalAxis"/>
<toolkit:LinearAxis Orientation="Y" Location="Right" Title="Percentage" x:Name="PercentageAxis" Minimum="0" Maximum="100"/>
</toolkit:Chart.Axes>
</toolkit:Chart>
Thank you in advance.
please check this code:
<toolkit:Chart Title="{Binding ChartTitle}" x:Name="myChart" Style="{StaticResource myChartStyle}" BorderBrush="{x:Null}" Background="Black" Foreground="White">
<toolkit:ColumnSeries ItemsSource="{Binding LegendList}"
DependentValueBinding="{Binding FeatureQuantity}"
IndependentValueBinding="{Binding LegendName}" DataPointStyle="{Binding Source={StaticResource ColorByGradeColumn}}" >
</toolkit:ColumnSeries>
<toolkit:Chart.Axes>
<toolkit:CategoryAxis Orientation="X"
Location="Bottom"
Foreground="White">
<toolkit:CategoryAxis.AxisLabelStyle>
<Style TargetType="toolkit:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="toolkit:AxisLabel">
<TextBlock
Text="{TemplateBinding FormattedContent}"
TextAlignment="Right"
TextWrapping="Wrap"
Width="60"
Margin="-20,15,0,0"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:CategoryAxis.AxisLabelStyle>
</toolkit:CategoryAxis>
</toolkit:Chart.Axes>
</toolkit:Chart>
and result is:
http://upload7.ir/imgs/2014-10/42094080161295718077.png
You can try this for your toolkit:ColumnSeries XAML element:
<chartingToolkit:ColumnSeries ItemsSource="{Binding}" DependentValuePath="AantalMeldingen" IndependentValuePath="Afdeling" Margin="0,0,0,1" Title="Aantal meldingen" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="8">
<chartingToolkit:ColumnSeries.IndependentAxis>
<chartingToolkit:CategoryAxis Orientation="X">
<chartingToolkit:CategoryAxis.AxisLabelStyle>
<Style TargetType="chartingToolkit:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:AxisLabel">
<TextBlock Text="{TemplateBinding FormattedContent}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</chartingToolkit:CategoryAxis.AxisLabelStyle>
</chartingToolkit:CategoryAxis>
</chartingToolkit:ColumnSeries.IndependentAxis>
</chartingToolkit:ColumnSeries>
I have a UserControl with some buttons. I need to change the background colour of the buttons but retain all other properties and colours such as mouseover events
I've used the following code which I hoped would define UniqueButton1 based on {StaticResource {x:Type Button}}" but change the background property to define my own colours
<UserControl x:Class="Project.Detail"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="800" BorderBrush="#FF5380E7" BorderThickness="0,0,0,1" xmlns:my="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
<UserControl.Resources>
<Style x:Key="UniqueButton1" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}" >
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#FFF896CE" Offset="0" />
<GradientStop Color="#FFF788C7" Offset="0.5" />
<GradientStop Color="#FFF570BB" Offset="0.5" />
<GradientStop Color="#FFF353AE" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Height="30" Width="800">
<Button Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" Name="button2" VerticalAlignment="Top" Width="50" Click="b_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed" />
<Button Style="{StaticResource UniqueButton1}" Height="30" HorizontalAlignment="Left" Margin="423,0,0,0" Name="button1" VerticalAlignment="Top" Width="50" Click="b_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed" />
</Grid>
</UserControl>
It kind of works, in that I get the background colours the way I need, but UniqueButton1 which I've defined in <UserControl.Resources> is not based on the other default button2 with no style changes applied. Eg, the background, colours, animation speeds etc are all different
Perhaps it's because I'm also applying a theme?
My question is either
1. How do I define a resource that is based on a default button2 with a theme applied?
or
2. How do I get all of the properties of button2 with the theme applied so I can build my own style?
It's been suggested I may need to build my own style, which is fine. But I need to match the behaviour of the default themed button except for the background property - if I can't see how it's made up it seems a bit of a catch22.
EDIT: To clarify things
These two images show 3 buttons, you can see the mousover for button3 is orange and blue for button2. What you can't see is that the animation speed is also different. Essentially I want my button to look like button1 in the rest state and button3 on mouseover whilst retaining the button3 animation speed and other properties. Button2 is what I'm getting using basedon with no further properties changed.
Button3 is produced with no resources and XAML
<Button Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" VerticalAlignment="Top" Width="50" Click="button_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed"/>
Button2 is produced using
<UserControl.Resources>
<Style x:Key="TEST1" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}" >
</Style>
</UserControl.Resources>
<Button Style="{StaticResource TEST1}" Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" VerticalAlignment="Top" Width="50" Click="button_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed"/>
Button1 is produced using
<UserControl.Resources>
<Style x:Key="UniqueButton1" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}" >
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#FFF896CE" Offset="0" />
<GradientStop Color="#FFF788C7" Offset="0.5" />
<GradientStop Color="#FFF570BB" Offset="0.5" />
<GradientStop Color="#FFF353AE" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Button Style="{StaticResource UniqueButton1}" Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" VerticalAlignment="Top" Width="50" Click="button_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed" />
So obviously button 1 and 2 are not based on button3 which is what I want. I want to clone button3 properties and ONLY change the background to pink.
Change your BaseButton from x:Type to a named one and then set it's name on others BasedOn, that should do the trick.
Currently i have a LinearGradientBrush displaying as a bar chart. The problem is on start up of my program (no values from databinding yet) i am getting white bars all across my screen, since the GradientBrush has no values yet and displays this as default.
How exactly do i make sure nothing shows until it actually get its databound values.
How to make this invisible until it get values?
Code of the DataTemplate and the itemsControl where its being used:
<ItemsControl x:Name="icGrafiek"
Margin="0,0,0,0"
ItemsSource="{Binding Source={StaticResource Grafiek}}"
ItemTemplate="{DynamicResource GrafiekItemTemplate}"
RenderTransformOrigin="1,0.5" Grid.RowSpan="6" Grid.Column="1"
<DataTemplate x:Key="GrafiekItemTemplate">
<Grid>
<Border Height="30" Margin="15" Grid.RowSpan="6">
<Border.Background>
<LinearGradientBrush StartPoint="0.0,0" EndPoint="1.0,0">
<GradientStopCollection>
<GradientStop Offset="0.0" Color="{Binding FillBar, UpdateSourceTrigger=PropertyChanged}" />
<GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}"
Color="{Binding FillBar, UpdateSourceTrigger=PropertyChanged}"/>
<GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}"
Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent" />
</GradientStopCollection>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</DataTemplate>
One way to hide the bars until there's data bound is to use Triggers to set the Visibility depending on some value.
In your DataTemplate:
<DataTemplate x:Key="GrafiekItemTemplate">
<Grid x:Name="grid">
...
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Value}" Value="{x:Null}">
<Setter TargetName="grid" Property="Visibility" Value="Collapsed" />
</DataTrigger>
</DataTemplate.Triggers>
You may have to use a different value than "Value" for the binding path in the DataTrigger, but this should get you started.