I'm trying to understand the meaning of each part of controls in the XAML popup templates.
Here is the original code:
<Popup x:Name="PART_Popup"
AllowsTransparency="true"
Grid.ColumnSpan="2"
IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
Placement="Bottom">
<Themes:SystemDropShadowChrome x:Name="shadow"
Color="Transparent"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
<Border x:Name="dropDownBorder"
BorderBrush="#FFEBEBEB"
BorderThickness="1"
CornerRadius="8"
Background="White">
<ScrollViewer x:Name="DropDownScrollViewer"
Template="{StaticResource UniversalScrollViewerTemplate}">
<Grid x:Name="grid"
RenderOptions.ClearTypeHint="Enabled">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Canvas x:Name="canvas"
HorizontalAlignment="Left"
Height="0"
VerticalAlignment="Top"
Width="0">
<Rectangle x:Name="opaqueRect"
Fill="{Binding Background, ElementName=dropDownBorder}"
Height="{Binding ActualHeight, ElementName=dropDownBorder}"
Width="{Binding ActualWidth, ElementName=dropDownBorder}" />
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter"
Grid.Row="1"
KeyboardNavigation.DirectionalNavigation="Contained"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
</ScrollViewer>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
I'm wondering what's the role of the Canvas Control canvas in the DropDownScrollViewer -> grid since its height and width are both 0.
Because the Grid allows ClearType text rendering. ClearType text has to be rendered to an opaque background.
Set the ClearTypeHint property to Enabled to indicate that a subtree is safe for ClearType text rendering. Do this only when you can be certain that the text is rendering to a fully opaque background.
https://msdn.microsoft.com/en-us/library/system.windows.media.renderoptions.cleartypehint(v=vs.110).aspx
Related
Please take a look at the code below:
<Window x:Class="WpfTest.Test2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test2" Height="300" Width="400">
<Grid>
<DockPanel LastChildFill="true">
<Expander DockPanel.Dock="Left" Header="" Background="#E2FFD6"
HorizontalAlignment="Left" VerticalAlignment="Stretch"
ExpandDirection="Left" IsExpanded="True" Height="Auto">
<StackPanel>
<Button Content=" open some tabs and show a messagebox "/>
<Button Content="do something else"/>
</StackPanel>
</Expander>
<TabControl HorizontalAlignment="Stretch">
<!-- some tabs here -->
</TabControl>
</DockPanel>
</Grid>
</Window>
which results in this:
As you see in the picture, this doesn't look nice and I want to move the expander icon to the center of the header. How can I do this? I tried changing the HeaderTemplate, but it didn't affect the icon placement.
This behaviour is hard-coded in the Template. When we edit a copy:
Rightclick your element in the designer window (not in the Xaml-Code),
then "Edit Template..." and "Edit a Copy..."
We find the relevant code in the ExpanderLeftHeaderStyle
<Style x:Key="ExpanderLeftHeaderStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.LayoutTransform>
...
</Grid.LayoutTransform>
<Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>
<Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" StrokeThickness="2" VerticalAlignment="Center"/>
</Grid>
<ContentPresenter HorizontalAlignment="Center" Margin="0,4,0,0" Grid.Row="1" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
...
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The RowDefinitions determine the location of the Icon (= the inner Grid), so we need to change them and the Row assignments for the inner Grid and ContentPresenter accordingly:
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="19"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.LayoutTransform>
...
</Grid.LayoutTransform>
<Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>
<Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" StrokeThickness="2" VerticalAlignment="Center"/>
</Grid>
<ContentPresenter Grid.Row="2" HorizontalAlignment="Center" Margin="0,4,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
</Grid>
</Border>
I would like to change the margin of the list of ComboItems in global, not to each, to create a space between the ComboBox and the list of items.
I explain. I know that I can add styles to ComboItem with
<Style TargetType="ComboBoxItem">
But in my case, I want to change the margin around my list of items, not for each of them.
I don't know how to reach the property to modify this margin.
If you have any idea, thanks you
You can extract the default control template of the combobox like that or like this:
Then you tweak this part (I added the Margin on the ItemsPresenter):
<Popup x:Name="PART_Popup" AllowsTransparency="True" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
<Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<ScrollViewer x:Name="DropDownScrollViewer">
<Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter Margin="0,10,0,10" x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
You get this:
I am trying to make a form with the top edges rounded in WPF. I have successfully done that part, although I have a canvas as a header on the form and the background image inside of it covers the rounded edges on my border. Is there a way to clip the edges from this canvas if it goes outside of the border? I tried sending the border to the back and set each element to clip although that does not work. If I set the border to the front then the border just sits on top. Can anyone offer some assistance?
Here is how I am creating the form with rounded corners-
<Border BorderBrush="Silver" BorderThickness="1" Height="645" HorizontalAlignment="Left" Name="mainBorder" VerticalAlignment="Top" Width="867" CornerRadius="10, 10, 0, 0" SnapsToDevicePixels="False" UseLayoutRounding="False" ClipToBounds="False" Background="{StaticResource FormGradient}">
<Canvas Height="43" Name="canvas1" Width="794" VerticalAlignment="Center" Margin="0,0,0,320">
<Canvas.Background>
<ImageBrush ImageSource="/WPFPROJECT;component/Images/canvas-nav-bar.png" Stretch="None" TileMode="Tile" Viewport="0,0,106,92" ViewportUnits="Absolute" />
</Canvas.Background>
<Rectangle Canvas.Left="-36.5" Canvas.Top="-25" Height="11" Name="headercanvasFooter" Stroke="{x:Null}" Width="867" Fill="White"></Rectangle>
</Canvas>
</Border>
<Canvas Height="118" HorizontalAlignment="Left" Name="headerCanvas" VerticalAlignment="Top" Width="867" ClipToBounds="True" DataContext="{Binding}" IsItemsHost="False">
<Canvas.Background>
<ImageBrush ImageSource="/WPFPROJECT;component/Images/Ps-HeaderSlice.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,27,158" ViewportUnits="Absolute" />
</Canvas.Background>
<Image Canvas.Left="698" Canvas.Top="6" Height="64" Name="headerLogo" Stretch="None" Width="163" Source="/WPFPROJECT;component/Images/WPFPROJECTImage.png" HorizontalAlignment="Center" IsHitTestVisible="False" StretchDirection="Both" VerticalAlignment="Center" Visibility="Visible" SnapsToDevicePixels="False" UseLayoutRounding="True" IsManipulationEnabled="False" ClipToBounds="False" />
</Canvas>
You can use OpacityMask on your inner Canvas to make the edges appear transparent
<Border x:Name="border" CornerRadius="20" BorderThickness="1" BorderBrush="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
<Canvas Background="Red" Width="50" Height="50" Opacity="0.5">
<Canvas.OpacityMask>
<VisualBrush>
<VisualBrush.Visual>
<Rectangle Fill="Black" Stroke="Black" StrokeThickness="1" RadiusX="20" RadiusY="20"
Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}"/>
</VisualBrush.Visual>
</VisualBrush>
</Canvas.OpacityMask>
</Canvas>
</Border>
I have finally managed to template my ribbon and adding everything with databinding.
However I have a very ugly "dropdownmenu" which background have become transparent (The shadowing remains though!)
1st of all what is this "dropdownmenu" called? Lastly which properties shall I edit for providing a proper background to this "dropdownmenu"?
Best Regards!
That menu is a drop-down menu of a collapsed group. Collapsed group is a combination of RibbonToggleButton + Popup. In template, the Popup looks like this:
<Popup x:Name="PART_Popup"
AllowsTransparency="true"
Placement="Bottom"
PlacementTarget="{Binding ElementName=PART_ToggleButton}"
IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
Focusable="false"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
<classic:SystemDropShadowChrome Name="Shdw"
Color="Transparent"
SnapsToDevicePixels="true"
CornerRadius="2"
Focusable="True"
FocusVisualStyle="{x:Null}"
controls:KeyTipService.IsKeyTipScope="True"
RenderOptions.ClearTypeHint="Enabled"
>
<Grid Name="PopupGrid" Height="{TemplateBinding ActualHeight}" Margin="0,1.5,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" MinHeight="16" />
</Grid.RowDefinitions>
<Border Name="PopupBorder" Grid.RowSpan="2"
Background="{TemplateBinding Background}"
BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Ribbon.BorderBrush}"
BorderThickness="1"/>
<Border Name="PART_HotBackground"
Background="{TemplateBinding MouseOverBackground}"
BorderBrush="{TemplateBinding MouseOverBorderBrush}"
Opacity="0"
Grid.RowSpan="2"
CornerRadius="2"
BorderThickness="1"
SnapsToDevicePixels="True"/>
<Border Margin="2,3.5,2,0" Padding="3,0,3,0" x:Name="PART_RibbonControlsHostBorder">
<Grid>
<ItemsPresenter Name="ItemsPresenter" KeyboardNavigation.TabNavigation="Cycle"
KeyboardNavigation.DirectionalNavigation="Cycle"
SnapsToDevicePixels="True"
Grid.IsSharedSizeScope="true"/>
<ContentControl Name="TemplateContentControl" Visibility="Collapsed" Focusable="False"/>
</Grid>
</Border>
<Grid Margin="2,0,2,1" Grid.Row="1">
<ContentPresenter Name="PART_Header"
TextElement.Foreground="{StaticResource Ë}"
ContentSource="Header"
Margin="2,0,2,0"
MaxHeight="15"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</Grid>
</classic:SystemDropShadowChrome>
</Popup>
As you can see, the Background is inherited from RibbonGroup.
So, you have few variants to fix it:
Set the Background property for your RibbonGroup that is not transparent
Retemplate
It must be simple but I can't figure it out. How to change the height of slider control in windows phone? No matter how large value I set for Height it remains as it is
<Slider Width="100" Height="600" />
Open the page in Expression Blend
Right click on Slider Control on Page .
Select Edit Template and Select Edit Current/ Edit a copy as you wish.
Change width values in Scale sub tab of Render Tab for the properties HorizontalTrack, HorizontalFill,HorizontalThumb in Expression Blend
and you will see the difference.
Save the page and get back to Visual Studio and your custom template will be added to page resources.
I have attached the image for Expression Blend .
And the result will be like
Template code :- which might be of help for you.
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
<Style x:Key="SliderStyle1" TargetType="Slider">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid Background="Transparent">
<Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform ScaleY="2.9"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform ScaleY="2.9"/>
</Rectangle.RenderTransform>
</Rectangle>
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="12" Margin="0,22,0,50" Width="12" RenderTransformOrigin="0.5,0.5">
<Thumb.RenderTransform>
<CompositeTransform ScaleY="4.65"/>
</Thumb.RenderTransform>
<Thumb.Template>
<ControlTemplate>
<Canvas Background="{StaticResource PhoneForegroundBrush}" Height="12" Width="12">
<Rectangle Fill="Transparent" Height="84" IsHitTestVisible="True" Canvas.Left="-24" Canvas.Top="-22" Width="60"/>
</Canvas>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And usage it in control like:-
<Slider Margin="0,49,56,348" HorizontalAlignment="Right" Width="360" Style="{StaticResource SliderStyle1}" />