We Keep Coding

The text box bottom border on UWP application is not visible

I am a creating a UWP application for the first time and I am encountering a weird problem where textbox's bottom border disappears if the textbox height is less than 32 (Default textbox size).
I want the textbox to be of height 25 and not 32. So, what should I do to get the bottom border of the textbox to remain and the size of textbox be 25?

In short, you need to make a custom style for your TextBox.
The steps: Go to 'Document Outline -> Right click your TextBox -> Edit Template -> Edit a Copy.'
Then, find the <Border x:Name="BorderElement"> element in this style and set its MinHeight that you want.
<Page.Resources>
<Style x:Key="TextBoxStyle1" TargetType="TextBox">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
...
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.ColumnSpan="2" Grid.Column="0" FontWeight="Normal" Foreground="{ThemeResource TextControlHeaderForeground}" Margin="{StaticResource TextBoxTopHeaderMargin}" Grid.Row="0" TextWrapping="Wrap" VerticalAlignment="Top" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
<Border x:Name="BorderElement" MinHeight="25" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" Grid.ColumnSpan="2" Grid.Column="0" Control.IsTemplateFocusTarget="True" MinWidth="{ThemeResource TextControlThemeMinWidth}" Grid.RowSpan="1" Grid.Row="1" />
<ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" Grid.Column="0" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="Disabled" />
<TextBlock x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Grid.Column="0" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}" IsHitTestVisible="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" Text="{TemplateBinding PlaceholderText}" TextWrapping="{TemplateBinding TextWrapping}" TextAlignment="{TemplateBinding TextAlignment}" />
<Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" MinWidth="34" Margin="{ThemeResource HelperButtonThemePadding}" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" VerticalAlignment="Stretch" Visibility="Collapsed" />
<ContentPresenter x:Name="DescriptionPresenter" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Description}" Grid.ColumnSpan="2" Grid.Column="0" Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" Grid.Row="2" x:Load="False" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<TextBox Style="{StaticResource TextBoxStyle1}" Height="25"></TextBox>
</Grid>
Please note that I only change the MinHeight for it, if you input in it, you will find that Its text display is incomplete. If you want to make it look better. You need to do more customization.
Please read Tutorial: Create custom styles and Control templates for more information.

This is a regression in Windows 10, version 1806 (build 17763). Previous version - Fall creators update (build 16299) doesn't have this issue.
Removing MinWidth="{ThemeResource TextControlThemeMinWidth}" on a Border element in TextBox style definition as suggested above fixes it.

Accessing a control which is in a contentpresenter in c#

How to access a named control that is in the content template of the contentpresenter. how to access the webview control(x:name=detView) from cs file.
<ContentPresenter
x:Name="DetailContentPresenter"
Grid.Row="0"
BorderBrush="{ThemeResource SystemControlForegroundBaseLowBrush}"
Content="{x:Bind coll.SelectedItem,Mode=OneWay}">
<ContentPresenter.ContentTemplate>
<DataTemplate x:DataType="data:coll_Details" x:Name="ttt">
<Grid>
<WebView DefaultBackgroundColor="#F5F5F5" x:Name="detView" Source="ms-appx-web:///Assets/Web/collDetails.html"/>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
<ContentPresenter.ContentTransitions>
<TransitionCollection/>
</ContentPresenter.ContentTransitions>
</ContentPresenter>

If you are using ContentPresenter as ControlTemplate like the example of Official Documentation.
You can get the template through the controlName.ContentTemplateRoot. I made a demo from the Example of official documentation above, and put a webview inside the DataTemplate.
MainPage.xaml:
<Page.Resources>
<Style TargetType="HyperlinkButton" x:Key="myStyle" >
...
<Setter Property="Template" x:Name="presenterSetter">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<Grid x:Name="rootGrid">
...
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="3">
<ContentPresenter x:Name="MyContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
>
<ContentPresenter.ContentTemplate>
<DataTemplate x:Name="ttt">
<Grid>
<WebView Source="ms-appx-web:///Assets/Web/default.html" Name="myWebView"/>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Border>
<!--focus visuals omitted-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel VerticalAlignment="Bottom">
<HyperlinkButton Name="myHyperlink" Style="{StaticResource myStyle}">This is a link</HyperlinkButton>
<Button Click="Button_Click" Name="myBtn">Click Me</Button>
</StackPanel>
</Grid>
And I can get the WebView using the codes below:
private void Button_Click(object sender, RoutedEventArgs e)
{
var myView= ((Grid)myHyperlink.ContentTemplateRoot).Children[0] as WebView;
}

In C#, use this code to find any control which is present in your ContentPresenter.
If a TextBlock is present in your ContentPresenter then first create a object of the TextBlock then cast it and then find control.
TextBlock myTextBlock = (TextBlock)ttt.FindName(“textBlock”, DetailContentPresenter);

How to use image in WPF progressbar?

I have a picture, I want to use it in WPF as a progressbar.
Please look at the image to understand this.
The code below, repeated the image.
The moving progress-box above the progressbar.
I have tried this
<ControlTemplate
x:Key="ImageProgressBarTemplate"
TargetType="ProgressBar">
<ControlTemplate.Triggers>
<EventTrigger
RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard
x:Name="str">
<RectAnimation
x:Name="quatanim"
Storyboard.TargetName="imgbrush"
Storyboard.TargetProperty="(ImageBrush.Viewport)"
From="0,0,36,36"
To="36,0,36,36"
Duration="0:0:5"
AutoReverse="False"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
<!-- Custom progress bar goes here -->
<Border
Name="PART_Track"
Width="{TemplateBinding Width}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Height="{TemplateBinding Height}"
CornerRadius="0"
Padding="1.5">
<Grid>
<!-- Rounded mask (stretches to fill Grid) -->
<Border
Name="mask"
Background="#EEEEEE"
CornerRadius="0" />
<!-- Any content -->
<Rectangle
Name="PART_Indicator"
HorizontalAlignment="Left"
Height="{TemplateBinding Height}">
<Rectangle.OpacityMask>
<VisualBrush
Visual="{Binding ElementName=mask}" />
</Rectangle.OpacityMask>
<Rectangle.Fill>
<ImageBrush
x:Name="imgbrush"
ImageSource="/myproject;component/Assets/myimage.png"
AlignmentX="Left"
Stretch="Fill"
TileMode="Tile"
AlignmentY="Top"
ViewportUnits="Absolute"
Viewport="0,0,36,36"
ViewboxUnits="RelativeToBoundingBox"
Viewbox="0,0,1,1">
</ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
<ProgressBar Template="{StaticResource ImageProgressBarTemplate}"/>
The all that I need is a detailed tutorial of how to use image in wpf progressbar for this kind of images.

You have to design your own template of progressbar.
<ControlTemplate TargetType="ProgressBar">
<Canvas>
<ProgressBar x:Name="pgbar" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
Value="{TemplateBinding Value}"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"/>
<Image Source="image.PNG" Canvas.Left="{TemplateBinding Value}">
<Image.RenderTransform>
<!-- width / 2 and height /2-->
<TranslateTransform X="-56" Y="-25"/>
</Image.RenderTransform>
</Image>
</Canvas>
</ControlTemplate>

An improvement for the answer of Klaus Fischer:
Here is the ProgressBar:
<ProgressBar Value="{Binding ProgressbarValue}" Template="{StaticResource Progressbar2}" />
And here is the template (See post of Klaus Fischer):
<ControlTemplate x:Key="Progressbar2" TargetType="ProgressBar">
<Canvas >
<ProgressBar x:Name="pgbar" Visibility="Hidden" Width="{Binding ElementName=StatusGrid,Path=ActualWidth}" Background="Transparent" Value="{TemplateBinding Value}" />
<Image Source="Resources/Images/running.png" Height="42px" Canvas.Left="{TemplateBinding Value, Converter={StaticResource WidthConverter}, ConverterParameter={x:Reference pgbar}}" />
</Canvas>
</ControlTemplate>
As you can see, there is a converter in the
Canvas.Left
property.
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var bar = ((System.Windows.Controls.ProgressBar) parameter);
var percentPixe = bar.ActualWidth/100;
return percentPixe*(double) value-42;
}
The expression
value-42
handles the size of the image, otherwise the image would be in front of the real ProgressBar.
This should do the job.

How to implement custom progressbar in XAML

I'm trying to implement custom "progressbar" which is based on image that is not rectangle. I through I could use opacitymask to achieve this, but I haven't yet figured out how to do it. I have an image which has transparent background and it's colored on white from inside. Initial state is that image is completely blue, and end state is that image is completely white (except borders will remain black)
Currently I have this kind of XAML code for this, but I dont see any blue filling over image...
<Style TargetType="ProgressBar" x:Name="ImageProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="{TemplateBinding Margin}"
Background="{TemplateBinding Background}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<Grid>
<Image Source="Assets/emptyprogress.png" Stretch="Fill" />
<Rectangle Fill="Blue">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="Assets/emptyprogress.png" Stretch="Fill" />
</Rectangle.OpacityMask>
<Rectangle.Clip>
<RectangleGeometry x:Name="CLIPRECTANGLE" />
</Rectangle.Clip>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ProgressBar Grid.Row="3" Style="{StaticResource ImageProgressBar}"
Width="200"
Height="200"
Minimum="0"
Maximum="100"
Value="50" />
This is what I have and this should be end point
This is what I want

Your fill rectangle needs to be named ProgressBarIndicator for the ProgressBar to be able to find and fill it.
You might also consider replacing your tooth image with a PathGeometry. You can then use the same geometry to Clip the rectangle.
Here's an example with Ellipses and inappropriately hard-coded values (I'll leave a more complicated path for an artist :) )
<Grid x:Name="DeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Visible">
<Ellipse Height="50" x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" />
<Rectangle Height="50" x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" >
<Rectangle.Clip>
<EllipseGeometry Center="200,25" RadiusY="25" RadiusX="200" />
</Rectangle.Clip>
</Rectangle>
</Grid>

Right align panorama header

It seems that there should be a very easy solution to this but I cannot find it and it's killing me ...
All I wanna do is to add a right aligned refresh button (or image, or whatever) to the Header of a PanaromaItem in a Panorama, so pressing it reloads the data. (look at the image below)
I tried overriding the PanoramaItem.Header:
<phone:PanoramaItem.Header>
<Grid>
<TextBlock Text="first item" />
<Image source="blah" HorizontalAlignment="Right" />
</Grid>
</phone:PanoramaItem.Header>
and I tried using Grid, StackPanel, ViewPanel and every other layout controller that I knew and couldn't achieve this unless I set a constant width.
Any idea?

Might as well answer this one correctly, just incase someone needs it.
You need to override the PanoramaItemStyle and set the Header ContentControl to Stretch.
HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch"
That way when you apply the template it will cover the whole width. Here is the full Override Style Template.
<phone:PhoneApplicationPage.Resources>
<Style x:Key="Chubs_PanoramaItemStyle" TargetType="phone:PanoramaItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:PanoramaItem">
<Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl x:Name="header" CharacterSpacing="-35" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontSize="66" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Margin="12,-2,0,38" HorizontalContentAlignment="Stretch">
<ContentControl.RenderTransform>
<TranslateTransform x:Name="headerTransform"/>
</ContentControl.RenderTransform>
</ContentControl>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
Now apply that style to the PanoramaItem like so
<phone:PanoramaItem Style="{StaticResource Chubs_PanoramaItemStyle}">
<phone:PanoramaItem.Header>
<Grid>
<TextBlock Text="header1"/>
<Image Source="/Assets/ApplicationIcon.png" Stretch="None" HorizontalAlignment="Right"></Image>
</Grid>
</phone:PanoramaItem.Header>
</phone:PanoramaItem>
And Screenshot of the results:

By default when we set horizontal alignment to the image within panorama item header then it is not working But we can fix the width of the header textblock and set the alignment right for the image.
<controls:PanoramaItem.Header>
<Grid>
<TextBlock Text="First" Width="400"/>
<Image Source="/ApplicationIcon.png" Width="60" Height="60" HorizontalAlignment="Right" />
</Grid>
</controls:PanoramaItem.Header>

I tried horizontalalign="Right" is not working but to achive this you could set left margin:
<phone:PanoramaItem Header="My Books" Foreground="LightGray" Margin="-10,0,0,0">
<phone:PanoramaItem.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="#72C158" Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" Margin="0,30,0,0" FontSize="55" FontFamily="/Font/BKANT.TTF#Book Antiqua" TextAlignment="Left" FontWeight="Normal"/>
<Button Height="50" Width="50" Margin="130,20,0,0"/>
</StackPanel>
</DataTemplate>
</phone:PanoramaItem.HeaderTemplate>
</phone:PanoramaItem>

As described here, you will need to override the pivotitem template to set the HorizontalAlignment of the Header to Stretch.
After that you should be able to align stuff to the right of the header.