Use the style defined in resource dictionary : - c#

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}" />

Related

How to set style triggers to a Path binding parent state on UWP XAML

I'm developing a UWP app using c# and XAML; In the project I have a Resouce dictionary where several Path icons are, I want this icons to change the color when the parent control has the Pointer Over, I did make this on WPF app with Style data triggers:
<Style.Triggers>
<DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource AncestorType={x:Type Button}, Mode=FindAncestor}}" Value="True">
<Setter Property="Fill" Value="White"/>
</DataTrigger>
</Style.Triggers>
But in UWP I know this works diferent but I can't figure it out I firstly tried creating a Path Style:
<Style TargetType="Path">
<Setter Property="VisualStateManager.VisualStateGroups">
<Setter.Value>
<VisualStateGroup>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="#F2B71E"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</Setter.Value>
</Setter>
</Style>
I know this is not correct because it need's to bind the parent state not this actual state, but not just that, this give me the error:
The property "VisualStateGroups" does not have an accessible setter.
So I opted for setting it up inside the path this way:
<Path x:Key="printIcon" Width="44" Height="43" Canvas.Left="16" Canvas.Top="17" Stretch="Fill" Data="F1 M 25,27L 25,17L 51,17L 51,27L 47,27L 47,21L 29,21L 29,27L 25,27 Z M 16,28L 60,28L 60,51L 51,51L 51,60L 25,60L 25,51L 16,51L 16,28 Z M 55,46L 55,33L 21,33L 21,46L 55,46 Z M 25,44L 25,39L 51,39L 51,44L 25,44 Z ">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="#F2B71E"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Path>
But now I'm dealing with
The name "PointerOver" is already defined in this scope.
And this don't fix the binding with the parent state
So I think I'm lost, how can I achieve changing the fill color or the path by the state of the parent?

You could do something like this...
"path" is stored as a string resource for reuse, then use the visual states of the UI control that already exist.
<Page.Resources>
<x:String x:Key="Icon_Printer">F1 M 25,27L 25,17L 51,17L 51,27L 47,27L 47,21L 29,21L 29,27L 25,27 Z M 16,28L 60,28L 60,51L 51,51L 51,60L 25,60L 25,51L 16,51L 16,28 Z M 55,46L 55,33L 21,33L 21,46L 55,46 Z M 25,44L 25,39L 51,39L 51,44L 25,44 Z</x:String>
<Color x:Key="Color_Base">#FFF2B71E</Color>
<Color x:Key="Color_Hover">#FFFFFFFF</Color>
<SolidColorBrush x:Key="Brush_Base" Color="{StaticResource Color_Base}" />
<SolidColorBrush x:Key="Brush_Hover" Color="{StaticResource Color_Hover}" />
<Style x:Key="PrinterButtonStyle" TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Icon">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Brush_Hover}"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Icon">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SystemAltMediumColor}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Path x:Name="Icon" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="{StaticResource Icon_Printer}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Foreground="{StaticResource Brush_Base}" Style="{StaticResource PrinterButtonStyle}" />
</Grid>

Why after selected when hover back to original color

It returns back to the original color even if selected when hover on it.
Why? How can I fix it?
This is the xaml:
I think it because the animation called even if it selected and canceled the selected color.
<Style x:Key="AcountComboItemContailner" TargetType="ComboBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<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=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</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>
<Rectangle x:Name="fillColor" Fill="White" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="White" 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="0" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

You have one element with the name fillColor, and you have two different VisualStates that both manipulate it. And each of those states will set the opacity to 0.35 while active, and each of them will set it back to 0.00 as soon as the state is going inactive again.
You need to have separate elements to indicate the respective states with. Otherwise your states will always mess with each others visual representation.

<Style x:Key="AcountComboItemContailner" TargetType="ComboBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="fillColor2"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame Value="#4D4D4D"
KeyTime="0" />
</ObjectAnimationUsingKeyFrames>
<!--<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>-->
</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>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="fillColor"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame Value="#4D4D4D"
KeyTime="0" />
</ObjectAnimationUsingKeyFrames>
<!--<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>-->
</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>
<Rectangle x:Name="fillColor" Fill="Transparent" IsHitTestVisible="False" Opacity="1" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="Transparent" IsHitTestVisible="False" Opacity="1" 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="0" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
thanks this is actually the solution!

How to create semi transparent image buttons

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>

Using Button resources for different hover states

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" />

ContentControl and its children - Same size?

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.

Categories

Resources