Develop Reference

What is opaqueRect used for in XAML popup template

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

Set Textbox Focus within a Control Template

I have a control template that defines a custom floating text box.
It consists of a label, a border that serves as the visual boundary for the text box, and a text box inside that border.
The border of the text box itself is made invisible.
My problem is this: when the custom control is "tabbed" to in the UI, the control gets KeyboardFocus, but the Textbox itself does not. This causes the blinking cursor not to show.
I need to know how to pass focus to the Textbox contained within the border, named DisplayText, from a trigger in the control template.
I tried using the FocusManager to set DisplayText to be the focused element, but that didn’t work.
Any ideas, thoughts or advice would be much appreciated. If you need any more information, please let me know.
Control Template:
<Grid SnapsToDevicePixels="True"
UseLayoutRounding="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label x:Name="floatingLabel"
Template="{DynamicResource LabelControlTemplate1}"
Content="{Binding LabelText, RelativeSource={RelativeSource Mode=TemplatedParent}}"
IsHitTestVisible="False"
Panel.ZIndex="2"
Background="White"
Height="15"
VerticalContentAlignment="Center"
Padding="3,0,3,0"
HorizontalAlignment="Left"
FontFamily="Segoe UI"
FontSize="{Binding LabelFontSize, RelativeSource={RelativeSource TemplatedParent}}"
Foreground="{DynamicResource FloatingLabelTextBox.Label.Foreground}"
VerticalAlignment="Center">
<Label.Tag>
<sys:Double>0.0</sys:Double>
</Label.Tag>
<Label.Margin>
<MultiBinding Converter="{StaticResource floatingLabelMarginConverter}">
<Binding Path="Tag"
RelativeSource="{RelativeSource Self}" />
<Binding ElementName="Border"
Path="ActualHeight" />
</MultiBinding>
</Label.Margin>
</Label>
<Border x:Name="Border"
Height="{Binding TextBoxHeight, RelativeSource={RelativeSource TemplatedParent}}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="3"
SnapsToDevicePixels="True"
Panel.ZIndex="0"
VerticalAlignment="Bottom">
<Grid x:Name="GridContainer" Width="{Binding ElementName=Border, Path=ActualWidth}" Margin="10,0,0,0">
<TextBox x:Name="DisplayText"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FormattedPhoneNumber, StringFormat={}{0:(###)###-####}, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Width="{Binding ElementName=Border, Path=ActualWidth}">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer x:Name="PART_ContentHost"
HorizontalAlignment="Stretch"
Margin="{TemplateBinding Padding}"
Uid="ScrollViewer_1"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Grid>
</Border>
</Grid>
Trigger:
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="FocusManager.FocusedElement" Value="{Binding ElementName=DisplayText}" />
</Trigger>

Try adding Focusable="False" to the Label.
I tried to copy your XAML into a Window and run it, but there's obviously a bunch of other stuff that I would need in order to get it to work.

Ribbon with templates causes transparent background

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

How to change height of slider control in windows phone?

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

Binding to ActualSize

For a given Width I want to achieve
I'm building this xaml tree:
<ContentPresenter x:Name="CardContentPresenter"
Height="{Binding ActualWidth,
ElementName=CardContentPresenter,
Converter={StaticResource WidthToHeightConverter},
Mode=OneWay}"
VerticalAlignment="Center">
<Border x:Name="CardBorder">
<Border x:Name="ContentBorder"
Width="{Binding ActualWidth,
ElementName=CardBorder,
Converter={StaticResource WidthToContentWidthConverter},
Mode=OneWay}"
Height="{Binding ActualHeight,
ElementName=CardBorder,
Converter={StaticResource WidthToContentWidthConverter},
Mode=OneWay}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid>
<ContentPresenter x:Name="CardContentContentPresenter"
Height="{Binding ActualWidth,
ElementName=CardContentContentPresenter,
Converter={StaticResource HeightToWidthConverter},
Mode=OneWay}"
VerticalAlignment="Center">
<Grid />
</ContentPresenter>
</Grid>
</Border>
</Border>
</ContentPresenter>
but as I can see by a breakpoints inside the converters, an order of the Height/Width's calculations is messy (for example, the inner-inner-Height calculates before the inner-Width, so the value is incorrect).
How can I control an order of the properties' calculations? Or the whole my approach is wrong and there is another way to deal with it?