I guess this is a quite simple (read: very simple) question, but I have been using quite some time to figure it out.
I have a class, PresentationItem, which is derived from ContentControl. I am working in Expression Blend, which gives a problem with the height and width of the PresentationItem.
When I insert a PresentationItem, it automatically sizes too full grid (800x600). Then, when I insert for instance a textblock, the textblock sizes to something small. I think this is the normal and expected behaviour.
What I want, is the presentationitem and Content child (for instance, a textblock) has the same size. It is annoying to work with 2 different sizes when I have several of these. So either the content inside the presentationitem should be stretched, or the presentationitem should resize to fit its children.
(Also, using something else than a ContentControl is not an option).
Right now I have the following style:
<Style TargetType="local:JSLDPresentationItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:JSLDPresentationItem">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PresentationStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="FocusedPresenting">
<Storyboard>
<DoubleAnimation Duration="0" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="LocalLayoutPanel" />
<DoubleAnimation Duration="0" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="LocalLayoutPanel" />
</Storyboard>
</VisualState>
<VisualState x:Name="AfterPresenting">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LocalLayoutPanel" />
</Storyboard>
</VisualState>
<VisualState x:Name="BeforePresenting">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LocalLayoutPanel" />
</Storyboard>
</VisualState>
<VisualState x:Name="UnfocusedPresenting"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LocalLayoutPanel" Margin="0,0,0,0" VerticalAlignment="Top" >
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What to change and where? I guess it is some "*" or "auto" at the right place!
Try setting the HorizontalContentAlignment and VerticalContentAlignment of your derived control to Stretch.
Related
I try to style a wpf datepicker in my ideas but have some trouble with deactivating the inner border.
When i hover over the datepicker or click into it, a light blue border appears around the input area. You can see it clearly on the screenshot.
How can i deactivate this border?
Override the template of the DatePickerTextBox and remove the visual state transitions that make the blue border appear:
<DatePicker>
<DatePicker.Resources>
<Style TargetType="DatePickerTextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePickerTextBox}">
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="WatermarkBrush" Color="#FFAAAAAA"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver" />
</VisualStateGroup>
<VisualStateGroup x:Name="WatermarkStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unwatermarked"/>
<VisualState x:Name="Watermarked">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentElement"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Watermark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1" Padding="{TemplateBinding Padding}">
<Grid x:Name="WatermarkContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border x:Name="ContentElement" BorderBrush="#FFFFFFFF" BorderThickness="1"/>
<Border x:Name="watermark_decorator" BorderBrush="#FFFFFFFF" BorderThickness="1">
<ContentControl x:Name="PART_Watermark" Focusable="False" IsHitTestVisible="False" Opacity="0" Padding="2"/>
</Border>
<ScrollViewer x:Name="PART_ContentHost" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
And no, there is no easier way :)
You can modify the default DatePicker ControlTemplate to give the control a unique appearance. For more information, see DatePicker Styles and Templates.
I'm using a thumb control in a windows store app to represent a draggable image. However whenever I hover over it it changes into a grey box, and when I drag it it turns into a darker grey box. When release it reverts to the image I gave it as a background. Is there any way to turn off or customize away the highlight/focus and dragging appearances?
EDIT:
Here is my XAML for the control. I have it inside a grid but don't do anything with that.
<Canvas x:Name="PART_background" Background="White" Height="140" Width="20">
<Thumb x:Name="PART_drag" Canvas.Left="0" Width="20" Height="50">
<Thumb.BorderBrush>
<SolidColorBrush Color="Black" Opacity="0"></SolidColorBrush>
</Thumb.BorderBrush>
<Thumb.Background>
<ImageBrush x:Name="PART_image" Stretch="None" AlignmentX="Center" />
</Thumb.Background>
</Thumb>
</Canvas>
You need to edit the template - it works best in Blend, then change the visual state animations. The default template has a few Border elements and for various visual states (PointerPressed, PointerOver) - it animates Opacity of these borders. Here's the extracted template. You can simply remove the Storyboards to get rid of the visual feedback.
<Page
x:Class="App132.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App132"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="ThumbStyle1" TargetType="Thumb">
<Setter Property="Background" Value="{StaticResource ThumbBackgroundThemeBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="BorderBrush" Value="{StaticResource ThumbBorderThemeBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Border x:Name="BackgroundPointerOver" BorderBrush="{StaticResource ThumbPointerOverBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource ThumbPointerOverBackgroundThemeBrush}" Opacity="0"/>
<Border x:Name="BackgroundPressed" BorderBrush="{StaticResource ThumbPressedBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource ThumbPressedBackgroundThemeBrush}" Opacity="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Thumb HorizontalAlignment="Left" Height="270" Margin="170,230,0,0" VerticalAlignment="Top" Width="390" Style="{StaticResource ThumbStyle1}"/>
</Grid>
</Page>
I have several buttons that does operations on an image. I need to put these buttons on top of the image. Buttons should be images themselves.
Button should be semi-transparent.
The image/color should be changed on a click, so that user can know which control is active.
On hovering over the button, the opacity should increase.
How can I do these. Any guideline on what way to proceed to create a custom control or what controls to use would be very helpful.
If I understand your requirements correctly, I think a ToggleButton should give you what you want.
Basically you need to create one semi-transparent Border for mouse over visual and another semi-transparent Border for unchecked visual. Then in the VisualStateManger, when the MouseOver state is active, you show the MouseOverVisual; when the Unchecked state is active, you show the UncheckedVisual.
I quickly mocked up a style for you in Expression Blend. It's not perfect but at leasat will give you some ideas. :)
<Style x:Key="SemiTransparentImageToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MouseOverVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="UncheckedVisual" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked"/>
<VisualState x:Name="Unchecked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UncheckedVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Border x:Name="MouseOverVisual" Background="White" Opacity="0.5" Visibility="Collapsed" OpacityMask="Black"/>
<Border x:Name="UncheckedVisual" Background="White" Opacity="0.7" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm creating a button using a spritesheet in xaml by repositioning the translateX and translateY values of the button.
What I would like to do is change the translateX and translateY value on the state change, I'm sure this is possible in xaml but under blend it would allow me to change those x and y values as it says they are computed values (i don't want those values tweening, just changing upon hover)
Here's the example of the current single state button.
<Button Content="test" HorizontalAlignment="Center" Height="57" VerticalAlignment="Center" Width="294" d:LayoutOverrides="VerticalAlignment">
<Button.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name="R" Opacity="1" StrokeThickness="0" Visibility="Visible">
<Rectangle.Fill>
<ImageBrush ImageSource="/Project;component/wp7_buttons.png" Stretch="None" AlignmentX="Left" AlignmentY="Top" >
<ImageBrush.Transform>
<CompositeTransform TranslateX="-558" TranslateY="0"/>
</ImageBrush.Transform>
</ImageBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Resources>
<Button.Style>
<StaticResource ResourceKey="ButtonStyle1"/>
</Button.Style>
</Button>
How do I do this? I need to be able to bind each state to a property which will include the x and y translate values and also the ImageSource.
you have to work with VisualStates like below
in blend you cand edit a button template copy and you will see all its VisualStates.
so you just have to change Storyboard.TargetName and Storyboard.TargetProperty to match with your ImageBrush CompositeTransform :)
<ControlTemplate TargetType="Button">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
<VisualTransition To="Pressed" />
<VisualTransition From="Pressed" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="0" />
<DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="0.25" />
<DoubleAnimation Duration="0" Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />
I have a style defined for listboxitem in a resource dictionary. I want to use this style in a cs file of listbox :
I am doing the below thing but it gives me null ,CustomListBoxItemStyle is a name of a key given to the style.
public class CustomListBox : ListBox
{
public CustomListBox()
{
this.ItemContainerStyle = Application.Current.Resources["CustomListBoxItemStyle"] as Style;
}
}
There is no xaml for this.
How to achieve this?
I have a style defined for listboxitem in a resource dictionary.
but is that resource dictionary merged into the application's resource dictionary. It doesn't happen automatically you need to include it in the App.xaml like this:-
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MyResourceDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- other resource defined directly in app xaml -->
</ResourceDictionary>
</Application.Resources>
Ok i tried almost every thing but there was no way to get rid of getting the this.ItemContainerStyle = null
So i changed the way of doing , Instead setting the ItemContainerStyle in a customlistbox.cs inherited from Listbox..I removed it from there.
Then where I was using mine custom listbox that was a usercontrol, so there was axaml for it :), hence i defined my ItemContainerStyle in the usercontrol.resource as shown below :
<UserControl.Resources>
<Style x:Key="CustomListBoxItemStyle" TargetType="ChargeEntry:CustomListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ChargeEntry:CustomListBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Stretch">
<TextBlock x:Name="txtName" />
</Grid>
<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
and then used it to custom listbox defined inside the usercontrol only..
<CustomListBox x:Name="lstComboBoxResult" ItemContainerStyle="{StaticResource CustomListBoxItemStyle}" />