How to bind polygon points in specific style at runtime wpf ,windows? - c#

I have this code for style
<Window.Resources>
<Style x:Key="Mystyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid >
<Polygon Name="poly" Points="0,0 0,100 50,200"
Fill=" TemplateBinding Background}"
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Name="b1" Style="{StaticResource Mystyle }"></Button>
</Grid>
I need to set points for polygon in style tag not static but dynamic based on some calculation how can i bind points to polygon.
example I have this
PointCollection pc=this.CalculatePolygonPoints(new Point(0,0), 100,Orientation.Flat);
How can i bind this pc to my polygon dynamic

Why dont you just create new dependency property(of a type PointCollection?) and bind Polygon's Points property against it? Then do your calculations when needed(#code-behind), and UI will automatically understand.
Here is an example(using ObservableCollection); http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/1293d4cb-87b3-4cdc-97e3-ae2f41caf2d4/

Related

MahApps MetroProgressBar does not work inside ControlTemplate

I would like to use MetroProgressBar in my UserControl.
<UserControl x:Class="WpfApplication7.UserControl1">
<StackPanel Background="#ccc">
<controls:MetroProgressBar IsIndeterminate="True"/>
</StackPanel>
</UserControl>
It works fine. But now I need to support external content in the user control.
So I created a new one "UserControl2" to demo:
<UserControl x:Class="WpfApplication7.UserControl2">
<UserControl.Resources>
<Style TargetType="{x:Type local:UserControl2}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:UserControl2}">
<StackPanel Background="#ccc">
<controls:MetroProgressBar IsIndeterminate="True"/>
<!--<ContentPresenter/>-->
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
</UserControl>
Then I put the both controls to the form:
<StackPanel>
<local:UserControl1 Background="#ccc"/>
<local:UserControl2 Background="#ccc" Margin="0,6,0,0"/>
</StackPanel>
As result I see that UserControl2 does not show Progress Bar.
How can I fix it?
Note: In the designer UserControl2 is rendered as expected with progress bar.
In your style for UserControl2, set properties EllipseDiameter and EllipseOffset to some value (default is 4), as shown below:
<Style TargetType="{x:Type local:UserControl2}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:UserControl2}">
<StackPanel Background="#ccc">
<controls:MetroProgressBar EllipseDiameter="12"
EllipseOffset="12"
IsIndeterminate="True"/>
<!--<ContentPresenter/>-->
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

wpf change ComboBox border width programatically

How can I change the border width of a combobox programatically.
I tried :
combobox.BorderWidth = ...
but It did not work
Ilan
I found out from your answers the following solution :
<Window.Resources>
<Style x:Key="ComboBoxStyleKey" x:Name="ComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Border x:Name="ContentPresenterBorder"
BorderBrush="{TemplateBinding Property=BorderBrush}"
BorderThickness="{TemplateBinding Property=BorderThickness}"
Background="{TemplateBinding Property=Background}"
CornerRadius="3">
<Grid>
<ToggleButton x:Name="DropDownToggle" />
<ContentPresenter x:Name="ContentPresenter" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Using this style I managed to change the border thickness
But now I have a new problem
The ToggleButton and the ContentPresenter does not work.
I want them to have the default behavior.
Is there a way to assign the default behavior to them (Something like style="default style")?
Thanks,
You can do it like this,
this.comboBox.BorderThickness = new Thickness(1, 1, 1, 3);

WPF Slanted TabItem

I am modifying the Header of a TabItem to conditionally display an Image, which led me to this MSDN article: HeaderedContentControl.Header Property. I attempted the code and substituted in my conditional image, which does what I expect.
However, the image in that example shows the TabItems with a different style than what I got when I ran my example. Where can I get the style for the slanted TabItems in the MSDN example?
Did you also apply the style for the HeaderedContentControl from the example?
<Style TargetType="HeaderedContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<StackPanel>
<Grid>
<Rectangle Stroke="{TemplateBinding Background}"/>
<ContentPresenter ContentSource="Header"/>
</Grid>
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter ContentSource="Content"/>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This overrides the default ControlTemplate of the control. Also, if you use TabControl instead of HeaderedContentControl, it is possible that the results vary.

WPF content control styling

I have a custom control which is basically a contentcontrol
public class PromoAlarmBox : ContentControl
{
static PromoAlarmBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(PromoAlarmBox), new FrameworkPropertyMetadata(typeof(PromoAlarmBox)));
}
}
I add it to the containing user control
<controls:PromoAlarmBox Grid.Row="9" Grid.Column="1" />
If I add the style to the containing usercontrols resources everything works fine
<UserControl.Resources>
<Style TargetType="{x:Type controls:PromoAlarmBox}">
<Setter Property="ContentControl.ContentTemplate">
<Setter.Value>
<DataTemplate >
<Rectangle Fill="Blue" Stroke="Black" Height="20" Width="20"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
But if I add it to generic.xaml in the custom controls project , nothing is show
<Style TargetType="{x:Type local:PromoAlarmBox}">
<Setter Property="ContentControl.ContentTemplate">
<Setter.Value>
<DataTemplate >
<Rectangle Fill="Blue" Stroke="Black" Height="20" Width="20"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I know the style is applied as I have other controls in same project whos styles are defined in generic.xaml, Anyone have any ideas?
A simple static should do the trick...
static PromoAlarmBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(PromoAlarmBox), new FrameworkPropertyMetadata(typeof(PromoAlarmBox)));
}
Although im not sure why there is a difference when you use a style as a local resource and when you use generic , this works for me
<Style TargetType="{x:Type local:PromoAlarmBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Rectangle VerticalAlignment="Stretch" Fill="Yellow" Stroke="Black" Height="20" Width="20"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Making tab header flexible to header text on WPF

I'm new to the WPF stuff around and I tried restyling a TabItem myself.
As you people can see the tabs are filling the window's whole width. Unlike my original purpose which I actually wanted to make the tabs width is based on the text inside of it. Like the original style, only redesigned.
My style in code:
<Style x:Key="ZoidTab" TargetType="{x:Type TabItem}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="ZoidTemplate" TargetType="{x:Type TabItem}">
<Border Width="Auto" Height="Auto">
<Grid x:Name="grid">
<Polygon
Fill="Turquoise"
Points="0,1 0.05,0 0.95,0 1,1"
Stretch="Fill"
Margin="0,0,0,0"
/>
<ContentPresenter x:Name="tabContent" HorizontalAlignment="Center" ContentSource="Header" VerticalAlignment="Center" TextElement.Foreground="#FFFFFFFF"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="12pt"/>
</Style>
I'd like to know what is it that I must fix to get the width right... Thank you.
The problem is that your Grid doesn't have a ColumnDefinitions section to limit the size of the one and only column. Modify it to look like this:
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
...

Categories

Resources