Is there a way to change the expanding orientation to upside of a combobox control in silverlight instead of downside?
What i mean is think of youtube's video quality combobox its openning from bottom to top (the combo box to select 240p, 340p etc..).. If i put the combobox in the bottom of layout its openning upside as default but is there a way to achieve this in any other place?
You'll need to use a attached behaviour, since the Silverlight popup control of the ComboBox doesn't have the Placement property. A example of such behaviour can be found here: Silverlight Popup with Target Placement
Then all you have to do is to apply a style, where you attach the behaviour to the Popup:
<Style x:Key="ComboBoxStyle1" TargetType="ComboBox">
... snip ...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
... snip ...
<!-- Attach behaviour here! -->
<Popup x:Name="Popup">
<Border x:Name="PopupBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" HorizontalAlignment="Stretch" Height="Auto">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFFEFEFE" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Related
How can I apply the DropShadowEffect on the content of a TextBox, as opposed to around the TextBox itself? I'd like the text to have the same effect as if I applied DropShadowEffect to a TextBlock.
<TextBox>
<TextBox.Effect>
<DropShadowEffect ShadowDepth="4"
Direction="330"
Color="Black"
Opacity="0.5"
BlurRadius="4"/>
</TextBox.Effect>
</TextBox>
^This creates shadow around the entire box.
<TextBlock>
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="4"
Direction="330"
Color="Black"
Opacity="0.5"
BlurRadius="4"/>
</TextBlock.Effect>
</TextBlock>
^This is the desired look. (But for the TextBox text)
EDIT: Take home message is that shaders are applied to every rendered pixel of a control. If you want to apply it to only parts of it, either apply it on that level on that template, or don't render everything else.
Instead you might want to remove the Border, Background and Focus rectangle from the textbox so you still have the TextBox functionality:
<TextBox Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
TextWrapping="Wrap">
<TextBox.Effect>
<DropShadowEffect ShadowDepth="4"
Direction="330"
Color="Black"
Opacity="0.5"
BlurRadius="4"
/>
</TextBox.Effect>
<TextBox.FocusVisualStyle>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate/>
</Setter.Value>
</Setter>
</Style>
</TextBox.FocusVisualStyle>
</TextBox>
By customizing the ControlTemplate of your TextBox, you can achive the desired effect:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid x:Name="RootElement">
<!-- Use your effects on the ContentPresenter here. -->
<ContentPresenter Content="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
I created a custom rounded button with following code But the color button doesn't follow the Background property of button so i have to create new style for each color of button.
How can i bind SolidColorBrush Color to Button Background color ?
<Style x:Key="RoundedButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle RadiusX="6" RadiusY="6">
<Rectangle.Fill>
<SolidColorBrush Color="BUTTON BACKGROUND"/>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The Button's Background is already a Brush. No need to create another one:
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle RadiusX="6" RadiusY="6" Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
You will probably have to use a one way DataBinding
I've written the following style
<Window x:Class="Wpf_ViewModelbased1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=MainVm}"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<!--Datepicker-->
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border BorderBrush="Black" BorderThickness="1">
<Grid x:Name="PART_Root" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<DatePickerTextBox x:Name="PART_TextBox" HorizontalContentAlignment="Center" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Center" IsReadOnly="True" Grid.Row="1"/>
<Button x:Name="PART_Button" Grid.Row="0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Image x:Name="buttonImage" Height="35" Width="35" HorizontalAlignment="center" Source="C:\Users\00027887\Documents\Visual Studio 2015\Projects\RelWA\RelWA\Resources\datepickerincon.png"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Popup x:Name="PART_Popup" StaysOpen="False" AllowsTransparency="True">
<CalendarItem x:Name="PART_CalendarItem">
<CalendarItem.Style>
<Style TargetType="{x:Type CalendarItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarItem}">
<Calendar SelectedDate="{x:Static sys:DateTime.Today}">
<Calendar.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Turquoise" Offset="0.7"/>
<GradientStop Color="White"/>
<GradientStop Color="green" Offset="1"/>
</LinearGradientBrush>
</Calendar.Background>
</Calendar>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</CalendarItem.Style>
</CalendarItem>
</Popup>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<DatePicker Width="100" Height="75"/>
</Grid>
</Window>
In desinger window everything looks like expected:
But when i debug the application:
I don't have a clue why.
When a DatePicker is visualized, its OnApplyTemplate method is called. If you spy that method you will find this piece of code:
this._popUp = (base.GetTemplateChild("PART_Popup") as Popup);
if (this._popUp != null)
{
this._popUp.AddHandler(UIElement.PreviewMouseLeftButtonDownEvent, new MouseButtonEventHandler(this.PopUp_PreviewMouseLeftButtonDown));
this._popUp.Opened += new EventHandler(this.PopUp_Opened);
this._popUp.Closed += new EventHandler(this.PopUp_Closed);
this._popUp.Child = this._calendar;
if (this.IsDropDownOpen)
{
this._popUp.IsOpen = true;
}
}
As you can see, the Child property of your "PART_Popup" is always overwritten with a calendar control which is a private field of the DatePicker itself. So it is unuseful to specify a child for the Popup in your ControlTemplate. Just leave it empty, i.e. with no child.
For setting a calender style, instead, just use the CalendarStyle property:
<DatePicker Width="100" Height="75">
<DatePicker.CalendarStyle>
<Style TargetType="{x:Type Calendar}">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Turquoise" Offset="0.7"/>
<GradientStop Color="White"/>
<GradientStop Color="green" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</DatePicker.CalendarStyle>
</DatePicker>
I hope it can help you with your issue.
I'm using the WPF Tookit (http://wpf.codeplex.com/) and am using the chart controls to make a column chart using ColumnSeries. I'm trying to override the default ColumnDataPoint style however when ever I run the application the columns no longer render and I see a "System.NotSupportedException" and "System.Xaml.XamlObjectWriterException" in the debug output log. Am I doing something wrong or is the issue with the outdated WPF Toolkit? Thanks.
Includes:
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
The Chart:
<chartingToolkit:Chart Name="columnChart" Title="Results" >
<chartingToolkit:ColumnSeries DataPointStyle="{DynamicResource ModernColumnStyle}" DependentValuePath="Count" IndependentValuePath="Method" ItemsSource="{Binding Results}" />
</chartingToolkit:Chart>
Resource with Style:
Only change I made from the original source was that I removed the VisualStateManager stuff
<Grid.Resources>
<Style TargetType="chartingToolkit:ColumnDataPoint" x:Key="ModernColumnStyle" BasedOn="{StaticResource {x:Type chartingToolkit:ColumnDataPoint}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:ColumnDataPoint">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" x:Name="Root">
<Grid Background="{TemplateBinding Background}">
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#77ffffff" Offset="0" />
<GradientStop Color="#00ffffff" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border BorderBrush="#ccffffff" BorderThickness="1">
<Border BorderBrush="#77ffffff" BorderThickness="1" />
</Border>
</Grid>
<ToolTipService.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}" />
</ToolTipService.ToolTip>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
Maybe you should change "DynamicResource" to "StaticResource" like this:
<chartingToolkit:ColumnSeries DataPointStyle="{StaticResource ModernColumnStyle}" DependentValuePath="Count" IndependentValuePath="Method" ItemsSource="{Binding Results}" />
I want to create a button style like expression blend buttons in this way:
when the mouse is not over them, their icons are black-white and
semi-transparent.
When the mouse is over them, they get color and become clear without transparency.
Is it possible to create such a style for XAML icons without coding in expression blend ?
Note that I dont want to use 2 icons.
When using a Paths instead of an image you can use the Visual State to switch from showing the paths with a border and transparant fills to the original a very easily.
You can use InkScape to convert your own images to paths(xaml), search prepared images online on sites like Xamalot or use a tool like Syncfusion Metro Studio to create the xaml you'd like.
Somthing like this could be a good place to start.
You have 2 images(these are from an online source, bit you can replace with a resource .png) the "iconfocus" will be visible when the mouse is over the button, and the "iconNofocus" will be visible when not.
This is a very rough example:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="PART_border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">
<Grid>
<Border x:Name="Highlight" Opacity="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.1" StartPoint="0.5,0.8">
<GradientStop Color="#90009FFF" Offset="0"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<StackPanel Orientation="Horizontal">
<Grid Width="{TemplateBinding ActualHeight}" Height="{TemplateBinding ActualHeight}">
<Image x:Name="iconFocus" Margin="2" Opacity="0" Source="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Folder-icon.png"/>
<Image x:Name="iconNofocus" Margin="2" Opacity="0.5" Source="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Folder-Generic-Green-icon.png"/>
</Grid>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
</StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Highlight" Property="Opacity" Value="1" />
<Setter TargetName="iconFocus" Property="Opacity" Value="1" />
<Setter TargetName="iconNofocus" Property="Opacity" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Normal:
Mouse Over: