We Keep Coding

How to remove arrow from ColorCanvas dropdown control in wpf C#

I am using c# wpf ColorCanvas control for using colors in my application.I want to remove dropdown arrow from ColorCanvas control.
I am using this Xaml Code for ColorCanvas
<xctk:ColorPicker x:Name="canvas_Copy" ColorMode="ColorCanvas" VerticalAlignment="Top" Margin="93,323,409,0" />
For clarity check this image.I want to remove this Arrow form ColorCanvas.

You should use a custom ButtonStyle:
<xctk:ColorPicker x:Name="canvas_Copy" ColorMode="ColorCanvas" VerticalAlignment="Top" Margin="93,323,409,0" >
<xctk:ColorPicker.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</xctk:ColorPicker.Resources>
<xctk:ColorPicker.ButtonStyle>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton" xmlns:chrome="clr-namespace:Xceed.Wpf.Toolkit.Chromes;assembly=Xceed.Wpf.Toolkit">
<Grid SnapsToDevicePixels="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Border>
<chrome:ButtonChrome x:Name="ToggleButtonChrome"
Grid.Column="1"
CornerRadius="0,2.75,2.75,0"
Visibility="{Binding ShowDropDownButton, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}, Converter={StaticResource BooleanToVisibilityConverter}}"
RenderChecked="{Binding IsOpen, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}}"
RenderEnabled="{Binding IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}}"
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderPressed="{TemplateBinding IsPressed}">
</chrome:ButtonChrome>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</xctk:ColorPicker.ButtonStyle>
</xctk:ColorPicker>

Use ColorCanvas control from the same namespace instead of ColorPicker.

finds its css file (or its styling file) and change its color to match its background

Can I reuse a Style using different DataTrigger Bindings?

I am working on a WPF 4.0 window with many status indicators using Labels. In one example, the Labels turn GREEN and read "Available" if the bound property's enumeration Foo is AVAILABLE. The labels turn RED and read "Not Available" if the bound property is NOTAVAILABLE. I also have other labels that indicate status of different bound enum Bar, and they turn different colors and have different content based on this value.
I am able to successfully bind and turn one label's color and text based on the value of a bound property. I use a rather lengthy ControlTemplate in a DataTrigger's Setter just to change the label's text.
Here's what I have so far:
<Window> ...
xmlns:cst="clr-namespace:CstCommonTypes;assembly=CstCommonTypes"
...
</Window>
<Label x:Name="Avail_Out_LBL" HorizontalAlignment="Left" Margin="111,44,0,0" VerticalAlignment="Top" Width="124" Height="18" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" SnapsToDevicePixels="False" Grid.Column="1" Padding="0">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Background" Value="#FFC08100"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="24"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Degraded"
Grid.Column="1"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding MonitorAndControlData.Availability}" Value="{x:Static cst:Foo.Available}">
<Setter Property="Background" Value="#FF567E4A"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="24"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Available"
Grid.Column="1"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding MonitorAndControlData.Availability}" Value="{x:Static cst:Foo.NotAvailable}">
<Setter Property="Background" Value="LightCoral"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="22"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="22"/>
</Grid.ColumnDefinitions>
<TextBlock Text=" Not Available"
Grid.Column="1"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
The above works, but I was wondering if I can reuse either the Style and give it different DataTrigger bindings or just reuse the ControlTemplate to cut down on xaml code. I tried to see if I could define a resource, but I couldn't figure out how to give it different Template Bindings for all the Labels.
Any help would be greatly appreciated.

If you need more properties to bind to, then turn it into a custom control (i.e. a class that inherits from Control), then you can add additional dependency properties on said control, which you can then bind to in the template.

It won't be possible to reuse the style if the bindings are not the same.
What you could do is make yourself a user control for your status indicators labels, Inside which you will create a Dependency Property (lets name it Availability) on which you will bind your Triggers to. But, you will have to make sure that you will always need the same type for your triggers. If the Availability binding is not of the same type for each of your labels, this solution won't work.
Here is a link on how to use Dependency Properties :
http://www.wpftutorial.net/dependencyproperties.html

Tooltip control with multiple Content properties

I am designing my own tooltip in SilverLight 5 and need to pass several values to it when displaying it.
Here is the Style:
<Style x:Key="TooltipStyle" TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border BorderBrush="Blue" BorderThickness="2" Background="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Var Number: "></TextBlock>
<ContentPresenter x:Name="Content1"
Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Grid.Row="1">
<TextBlock Text="Last Update Date: " />
<ContentPresenter x:Name="Content2"
Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am applying the style like so:
var customTooltip = new ToolTip
{
Style = (Style)Resources["TooltipStyle"],
Content = questions.Number[c]
};
ToolTipService.SetToolTip(textbox, customTooltip);
There is only one 'Content' property there, but I need to pass something to 'Content2' as well. (Please note the content is gathered as we do a 'for' loop.)
So the image that comes up, instead of having one variable, can have both the Var Number and the Last Update Date. Reputation too low to post image, here is the final look of the tooltip to give you an idea:
http://imgur.com/HYBbXMN
So that's the situation.
Now I am wondering if I can expose a second Content property? Or perhaps there is a smarter and better way to style the tooltip to meet my needs?
Please note this example requires two values (or 'Content') to be displayed but tooltip will expand to require more.
I will appreciate any ideas.

So to make it easier on ya, personally I just leverage things already available for that type of thing. Like for example using Tag to piggy back that sort of thing into the template.
An example (with some additions for setters and stuff you'll probably want to omit or change) like;
<Style x:Key="NiftyToolTipStyle" TargetType="ToolTip">
<Setter Property="FontFamily" Value="{StaticResource FontFamily}" />
<Setter Property="FontSize" Value="{StaticResource FontSize}" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="3" />
<Setter Property="BorderThickness" Value="1,2" />
<Setter Property="BorderBrush" Value="Blue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border x:Name="Root"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="1"
Padding="{TemplateBinding Padding}"
Cursor="{TemplateBinding Cursor}">
<Border.Effect>
<DropShadowEffect Opacity="0.35" ShadowDepth="3" />
</Border.Effect>
<TextBlock>
<Run Text="{TemplateBinding Tag, StringFormat='Var Number: \{\0}'}"/>
<LineBreak/>
<Run Text="{TemplateBinding Content, StringFormat='Last Update Date: \{\0}'}"/>
</TextBlock>
<!--
<ContentPresenter Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Cursor="{TemplateBinding Cursor}" />
-->
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This way you can just pass in one value to Content and another to Tag and you're good. You could also easily do other stuff, there's multiple options. Hope this helps, Cheers

Windows Phone 8, remove the Header of each PivotItem

I struggled with this problem for hours. I want to use the control Pivot as a Pager in Windows Phone, so I want to remove the Header of each PivotItem. What I have done is to create a DataTemplage for the Pivot's HeaderTemplate, as below:
<DataTemplate x:Name="DataTemplateScrollTestItemHeader"
x:Key="DataTemplateScrollTestItemHeader">
<TextBlock
Height="0"
Width="0"
Margin="0,0,0,0"
Padding="0,0,0,0"
Text=""/>
</DataTemplate>
In code, I set the HeaderTemplate to this DataTemplate:
PivotTestType.HeaderTemplate = DataTemplateScrollTestItemHeader;
What happened is the header text is disappeared, but the header still occupied some space. I have read this：
Windows Phone 8: remove pivot header
But it's the same with my method. It can't remove the space of the Header.
Anyone know how to handle this?

I think the best would be to underdstand how the pivot is constructed (with this you will be able to do whatever you want with your pivot), I wrote a small example which may help you:
<phone:Pivot Name="myPivot" VerticalAlignment="Stretch" Title="myPivot">
<phone:Pivot.Template>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="10,0,0,0"/>
<primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" Margin="0,5,0,5"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</phone:Pivot.Template>
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid Height="30">
<TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeMediumLarge}" Margin="0,0,10,0"/>
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Margin="0">
</phone:PivotItem>
</phone:Pivot>
With the code above you can change height, background color etc. of pivot title, header itempresenter and so on.
And don't forget to add xmlns-primitives at the beginning of xaml:
xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"
You can also find more on this site or MSDN: this, MSDN.

Remove all Headers from PivotItems and build (F6) the application.
<phone:Pivot Title="MY APPLICATION">
<phone:PivotItem>
// Some code
</phone:PivotItem>
<phone:PivotItem>
// Some code
</phone:PivotItem>
</phone:Pivot>

Hy, Here is my solution to remove the header and title :
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PivotWithoutHeaderTitleStyle" TargetType="phone:Pivot">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="0" Height="0"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement" Margin="0" Height="0"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ImagePivotItemStyle" TargetType="phone:PivotItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:PivotItem">
<Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Pivot">
<VisualState x:Name="Right"/>
<VisualState x:Name="Left"/>
<VisualState x:Name="Center"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources> <phone:Pivot Name="ImagesPivot" Margin="0,0,0,0" Style="{StaticResource PivotWithoutHeaderTitleStyle}" ItemContainerStyle="{StaticResource ImagePivotItemStyle}">
<phone:Pivot.TitleTemplate>
<DataTemplate/>
</phone:Pivot.TitleTemplate>
<phone:Pivot.HeaderTemplate>
<DataTemplate/>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Hope that will help

Binding custom dependency property to custom WPF style

I have an issue when designing a inherited Expander. My intention is to have a progress bar behind the toggle button and text in the default Expander header.
I have this XAML code which gives me the progress bar in the header. It is a custom style.
<Style x:Key="CurrentScanExpanderStyle" TargetType="{x:Type local:ProgressExpander}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ProgressExpander}">
<Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
<DockPanel>
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ProgressBar Name="ProgressBar"/>
<ToggleButton FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" Margin="1" MinHeight="0" MinWidth="0" x:Name="HeaderSite" Style="{StaticResource ExpanderDownHeaderStyle}" IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"/>
</Grid>
<ContentPresenter Focusable="false" Visibility="Collapsed" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="ExpandSite" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" DockPanel.Dock="Bottom"/>
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<!-- Triggers haven't changed from the default -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
this works fine but I am having trouble binding my custom dependency property which controls the progress percentage.
public class ProgressExpander : Expander
{
static ProgressExpander()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ProgressExpander), new FrameworkPropertyMetadata(typeof(ProgressExpander)));
}
public int Progress
{
get { return (int)GetValue(ProgressProperty); }
set { SetValue(ProgressProperty, value); }
}
// Using a DependencyProperty as the backing store for Progress. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ProgressProperty =
DependencyProperty.Register("Progress", typeof(int), typeof(ProgressExpander), new UIPropertyMetadata(0));
}
This is the code inside of the window:
<local:ProgressExpander Grid.Row="1" Header="Current Scan" ExpandDirection="Down" x:Name="currentScanExpander" Style="{DynamicResource CurrentScanExpanderStyle}">
<Canvas Background="SkyBlue"
Name="currentScanCanvas"
Height="{Binding ElementName=currentScanExpander, Path=ActualWidth}"
/>
</local:ProgressExpander>
I'm not sure how to bind this dependency property progress to the progress value in the ProgressBar within the style.
Any help would be appreciated.

In the style, we can use a standard Binding with a RelativeSource to set up the property.
<ProgressBar Name="ProgressBar"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Progress}"
Minimum="0"
Maximum="100" />
Then, in the window we just add Progress="50" or a binding to somewhere else.
You will also need to set the Button's background to transparent, or change some manner of the layout, in order to see it.