We Keep Coding

UWP: Cannot Implicitly Convert Button to AppBarButton

When I run my C# UWP app in debug mode with Visual Studio it works fine, however after trying to Create an App Package, I get an error during the build:
Cannot implicitly convert type 'Windows.UI.Xaml.Controls.Button' to 'Windows.UI.Xaml.Controls.AppBarButton'. An explicit conversion exists (are you missing a cast?)
I don't actually have any Buttons in the xaml code, they're all AppBarButtons. Can anyone see what I've got wrong? The Xaml is below.
<Page
x:Class="Sheet_Music_Reader.Views.ScoreViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sheet_Music_Reader.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:muxc="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
mc:Ignorable="d">
<Grid Margin="0,-125,0,0" Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">
<CommandBar DefaultLabelPosition="Right" Height="42" HorizontalContentAlignment="Left" >
<CommandBar.Content>
<AppBarButton FocusVisualPrimaryThickness="0" FocusVisualSecondaryThickness="0" VerticalAlignment="Top" HorizontalAlignment="Left" Icon="Back" x:Name="BackButton" ToolTipService.ToolTip="Back" Click="BackButton_Click"/>
</CommandBar.Content>
<AppBarSeparator/>
<AppBarElementContainer>
<InkToolbar x:Name="inkToolbar" VerticalAlignment="Center" HorizontalAlignment="Left" Orientation="Horizontal" TargetInkCanvas="{x:Bind inkCanvasA}">
<InkToolbarCustomToggleButton
x:Name="toggleButton"
Click="CustomToggle_Click"
ToolTipService.ToolTip="Touch Writing">
<SymbolIcon Symbol="{x:Bind TouchWritingIcon}"/>
</InkToolbarCustomToggleButton>
</InkToolbar>
</AppBarElementContainer>
<AppBarSeparator/>
<AppBarElementContainer VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Margin="0,0,10,0" VerticalAlignment="Center" Padding="10,0,0,0">Go to page:</TextBlock>
<TextBox FocusEngaged="GoToTextBox_FocusEngaged" AllowFocusWhenDisabled="True" AllowFocusOnInteraction="True" x:Name="GoToTextBox" BorderThickness="0" VerticalAlignment="Center" KeyDown="GoToTextBox_KeyDown" InputScope="Number" IsHitTestVisible="True" IsEnabled="True"/>
<AppBarButton Width="40" Height="45" Click="GoToPage" VerticalAlignment="Center" BorderThickness="0" Background="Transparent">🡢</AppBarButton>
</StackPanel>
</AppBarElementContainer>
<AppBarSeparator/>
<AppBarButton Label="Fullscreen" Icon="FullScreen" x:Name="FullscreenButton" ToolTipService.ToolTip="Fullscreen" Click="FullscreenButton_Click"/>
<AppBarSeparator/>
<AppBarButton Label="Bookmarks" Icon="Bookmarks" x:Name="BookMarksButton" ToolTipService.ToolTip="Bookmarks">
<AppBarButton.Flyout>
<Flyout Placement="Bottom">
<StackPanel Margin="0,20,0,0" Background="Transparent">
<StackPanel x:Name="bookmarkstackpanel" Margin="10" Background="Transparent">
<TextBlock x:Name="nobookmarkmessage" Text="You have no bookmarks." />
<StackPanel x:Name="bookmarkstacker" Orientation="Horizontal" Background="Transparent">
<ListView x:Name="bookmarkslist" Margin="0,0,5,0">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<ListView x:Name="bookmarkslistdeleter" Width="53">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</StackPanel>
</StackPanel>
<AppBarButton Content="Create Bookmark" Width="140" BorderThickness="1" BorderBrush="gray" Height="50" HorizontalAlignment="Center" Margin="30,0,30,0" FontSize="18" Click="NewBookmarksButton_Click"></AppBarButton>
</StackPanel>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>
</CommandBar>
<ProgressRing x:Name="LoadingIndicator" Height="100" Width="100"/>
<TextBlock x:Name="LoadingText" Text="Opening PDF" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="0,180,0,0"/>
<TextBlock x:Name="LoadingText2" Text="Large documents may take a moment to open for the first time" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16" Margin="0,270,0,0"/>
<AppBarButton Width="0" Height="0" x:Name="focusremover"></AppBarButton>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,45,0,0" Grid.Row="1" x:Name="DoubleGrid">
<ScrollViewer x:Name="landscapescroller" ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="7" HorizontalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalScrollBarVisibility="Visible">
<Grid x:Name="biggergrid">
<Grid x:Name="landscapeEnclosingGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" Margin="0,0,0,0" x:Name="leftimagegrid">
<Image x:Name="leftimage" VerticalAlignment="Center" Source="/Assets/enScore-logo-grey-large.png" HorizontalAlignment="Right"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Margin="0,0,0,0">
<Image x:Name="rightimage" VerticalAlignment="Center" Source="/Assets/enScore-logo-grey-large.png" HorizontalAlignment="Left"/>
</Grid>
</Grid>
<InkCanvas x:Name="inkCanvasA" />
</Grid>
</ScrollViewer>
</Grid>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="SingleImage" Margin="-1000,45,-1000,0" Grid.Row="1">
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="7" HorizontalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalScrollBarVisibility="Visible" Name="singlescroller">
<Grid x:Name="biggergridtwo">
<Grid x:Name="portraitEnclosingGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid Margin="0,0,0,0" Grid.Column="0" Grid.Row="0">
<Image x:Name="SingleImagefield" VerticalAlignment="Center" Source="/Assets/enScore-logo-grey-large.png" HorizontalAlignment="Center"/>
</Grid>
</Grid>
<ScrollViewer MinZoomFactor="2" MaxZoomFactor="2" HorizontalScrollMode="Disabled" ZoomMode="Disabled" VerticalScrollMode="Disabled">
<InkCanvas x:Name="inkCanvasB" Width="4000"/>
</ScrollViewer>
</Grid>
</ScrollViewer>
</Grid>
<RelativePanel x:Name="PageTurningCanvas" Margin="0,40,0,0">
<Grid PointerPressed="TurnPageLeftButton_PointerPressed" PointerEntered="Grid_PointerEntered" PointerMoved="Grid_PointerEntered" x:Name="TurnPageLeftButton" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignTopWithPanel="True" Width="100" Opacity="0" VerticalAlignment="Center" HorizontalAlignment="Left" Background="Transparent"/>
<Grid PointerPressed="TurnPageRightButton_PointerPressed" PointerEntered="Grid_PointerEntered" PointerMoved="Grid_PointerEntered" x:Name="TurnPageRightButton" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignTopWithPanel="True" Width="100" Opacity="0" VerticalAlignment="Center" HorizontalAlignment="Right" Background="Transparent"/>
</RelativePanel>
</Grid>
</Page>

How can I change the position of the default "grip" in WPF

I would like to use the basic grip. but I don't see where I could change its position. Now if you look my picture you can see I disabled the borders and gave some shadows to the main rectangle. I would like to keep it that way.
I wonder if there is a simple modification next to this "ResizeMode="CanResizeWithGrip"
Code:
<Window x:Class="Serenity.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Serenity"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="1100" WindowStyle="None" AllowsTransparency="True" Background="{x:Null}" MinWidth="720" MinHeight="480" Icon="Images/CloseBlack.png" ResizeMode="CanResizeWithGrip">
<Grid>
<Rectangle x:Name="MainTable" Fill="#FF1A1A1A" Margin="10" Stroke="Black" StrokeThickness="1.0">
<Rectangle.Effect>
<DropShadowEffect x:Name="Shadow" BlurRadius="13" ShadowDepth="0" Color="Black"/>
</Rectangle.Effect>
</Rectangle>
<Button x:Name="Website" Content="Google" Margin="0,0,38,38" Click="button_Click" Background="#FF48484A" BorderBrush="{x:Null}" Foreground="White" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" AutomationProperties.HelpText="You will close the program." Height="28" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="99"/>
<Rectangle x:Name="TitleBar" Fill="#FF2D2D30" Height="43" Margin="10,10,10,0" Stroke="Black" VerticalAlignment="Top" MouseDown="TitleBar_MouseDown"/>
<Button x:Name="CloseB" Content="Exit" Margin="0,18,19,0" BorderBrush="{x:Null}" Foreground="White" HorizontalAlignment="Right" Width="50" Height="24" VerticalAlignment="Top" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" RenderTransformOrigin="-0.25,1.45" Click="CloseB_Click" Background="#FF48484A" OpacityMask="Black" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
</Grid>

I have tried and succeeded
<Style TargetType="{x:Type ResizeGrip}">
<Setter Property="Margin" Value="25"/>
</Style>

Positioning texblocks in control template

Im trying to make exclamation mark next to the text for validation exception.
There is my custom template there is my XAML:
<Window x:Class="WpfApplicationLAB.NewGameWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplicationLAB"
mc:Ignorable="d"
Height="80" Width="260"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
AllowsTransparency="False"
Title="NewGameWindow"
ResizeMode="CanResize" MinWidth="180" MinHeight="90">
<Grid Name="GridInputName">
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="29*"/>
<RowDefinition Height="28*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="51*"/>
<ColumnDefinition Width="121*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Content="Size:" HorizontalContentAlignment="Center"/>
<TextBox Name="textBox" Grid.Row="1" Grid.Column="1">
<TextBox.Text>
<Binding Path="Ssize" UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<local:SizeValidation/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
<Button Name="Cancel"
Grid.Row="2" Grid.Column="0" Content="Cancel" Click="Cancel_Click" >
</Button>
<Button Name="Ok"
Grid.Row="2" Grid.Column="1" Content="Ok" Click="Ok_Click">
</Button>
</Grid>
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<Border Background="Red" Margin="0,0,0,0" Width="20" Height="20" CornerRadius="10"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center" FontWeight="Bold" Foreground="white">
</TextBlock>
</Border>
<TextBlock
Margin="5,0,0,0"
Foreground="Red"
Text="{Binding ElementName=MyAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
</TextBlock>
<Border BorderBrush="Red" BorderThickness="1" Margin="5,0,5,0" >
<AdornedElementPlaceholder Name="MyAdorner" ></AdornedElementPlaceholder>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
</Window>
I want the exclamation mark on the left side of the text, I can't reach it anyway i try, with stack panel and it's orientation changed, dock panels etc.
With this code it looks that:
in some different variables it can be on the left side of the textbox
Any tips?

Try to wrap the Border with Background="Red" and the TextBlock with Foreground="Red" in a StackPanel with Orientation="Horizontal".
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Border Background="Red"
Margin="0"
Width="20"
Height="20"
CornerRadius="10"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!"
VerticalAlignment="center"
HorizontalAlignment="center"
FontWeight="Bold"
Foreground="white"/>
</Border>
<TextBlock Margin="5,0,0,0"
Foreground="Red"
Text="{Binding ElementName=MyAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"/>
</StackPanel>
<Border BorderBrush="Red" BorderThickness="1" Margin="5,0" >
<AdornedElementPlaceholder Name="MyAdorner"/>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This worked for me.
PS: did you realize that you wrote MinHeight="90"... and then Height="80"? Does it make sense for you?

Removing textbox focus border but keeping original in wpf

this is my first time using WPF and I want to know how I can remove the focus border because it is overlapping my current border? I have a white border (bottom only) and I want that to stay.. but I don't want a blue border on selecting the textbox because it overlaps my text box's current border, how can I solve this?
<Window ResizeMode="NoResize" x:Name="Sahara" x:Class="Sahara.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Sahara"
mc:Ignorable="d"
Title="Sahara" Height="499.75" Width="696.525" Background="White" Topmost="True" Icon="C:\Users\ashle\Downloads\Seanau-Support-Bubble-Support-Bubble-1.ico">
<Grid x:Name="Sahara1" Background="#FF6F5499">
<Label x:Name="label" Content="Sign In" HorizontalAlignment="Left" Margin="283,93,0,0" VerticalAlignment="Top" FontSize="29.333" Foreground="White" FontFamily="Verdana Pro Light"/>
<TextBox x:Name="loginUsernameText" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" Height="30" Margin="216,177,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="260" Background="#FF926FB4" Foreground="White" BorderThickness="0,0,0,1" BorderBrush="White" FontStyle="Italic" TextChanged="loginUsernameText_TextChanged"/>
<PasswordBox x:Name="loginPasswordText" PasswordChar="•" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" Height="30" Margin="216,213,0,0" VerticalAlignment="Top" Width="260" Background="#FF926FB4" Foreground="White" FontFamily="Arial" FontSize="16" BorderThickness="0,0,0,1" BorderBrush="White"/>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="216,261,0,0" VerticalAlignment="Top" Width="260" Height="30" Background="White" Foreground="#FF6F5499"/>
</Grid>
</Window>

You will need to create ControlTemplate for your TextBox
something like this
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<DockPanel>
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<DockPanel>
<ScrollViewer HorizontalAlignment="Stretch" x:Name="PART_ContentHost"/>
</DockPanel>
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

How do I override a property in a ControlTemplate?

I have the following XAML:
<Window x:Class="WpfTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="227" Width="391">
<Window.Resources>
<ControlTemplate x:Key="PentagonButton" TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="Red" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Content="red" Margin="12,19,0,0" Template="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Content="blue" Margin="178,19,0,0" Template="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" />
</Grid>
</Window>
Because of Fill="Red", obviously all buttons will have a red fill/background color. I want to use this template for several buttons, but each of them with a different fill color, known at design time. Setting the background color has no effect, so I have to change the Fill color, but I can't define the Path property again in the actual button definitions. How do I access and override this property in the XAML?

Don´t use the template directly. Assign a Style and use that.
i.e.
<Style x:Key="PentagonButton" TargetType="{x:type Button}">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="{TemplateBinding Background}" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then use it like this:
<Grid>
<Button Content="red" Margin="12,19,0,0" Style="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Content="blue" Margin="178,19,0,0" Style="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" Background="Blue" />
</Grid>

Use TemplateBinding to change the values of your templates in the xaml of its controls:
<ControlTemplate x:Key="PentagonButton" TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="{TemplateBinding Background}" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
Your button:
<Button Background="Red" Content="red" Margin="12,19,0,0" Template="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Background="Blue" Content="blue" Margin="178,19,0,0" Template="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" />