C# WPF Progress Bar ControlTemplate Update Text - c#

I've create a control template for a progress bar that includes a textblock where I want to put the update the text based on the % of a file downloaded.
I've no problem getting the % etc. I just want to know how from the c# code do I target the textblock.
Here is my controltemplate
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Rectangle Stroke="#FF000000" RenderTransformOrigin="0.5,0.5" x:Name="PART_Track" RadiusX="5" RadiusY="50">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Gray" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="#FF000000" RenderTransformOrigin="0.5,0.5" x:Name="PART_Indicator" HorizontalAlignment="Left" RadiusX="5" RadiusY="50">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF023501" Offset="1.0"/>
<GradientStop Color="#FFB6F9B4" Offset="0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Viewbox>
<TextBlock TextAlignment="Center" Background="Transparent" FontFamily="Times" Foreground="Black" x:Name="ProgressText" Margin="2,2,2,2">Test
</TextBlock>
</Viewbox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Looks like on my screen it's not showing all that code for some reason, anyway, I'm trying to target that TextBlock x:Name "ProgressText"

Did you try to bind the text to the combobox value? Kind of
<TextBlock TextAlignment="Center" Foreground="Black" x:Name="ProgressText"
Margin="2,2,2,2"
Text={TemplateBinding Value,
Converter={StaticResource DoubleToPercent}}/>
You'll need to specify a converter, of course, but as proof of concept you can try witout it.
Edit:
You'll have to employ a multibinding, since your percent value depends on Minimum and Maximum as well:
<TextBlock TextAlignment="Center" Foreground="Black" x:Name="ProgressText"
Margin="2,2,2,2">
<TextBlock.Text>
<MultiBinding Converter="{StaticResource DoubleToPercent}">
<TemplateBinding Path="Value" />
<TemplateBinding Path="Minimum" />
<TemplateBinding Path="Maximum" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
Disclaimer: I didn't try this code.

Related

map shape to another button

<Path Data="M0.5,0 L0.5,1 M0,0.5 L1,0.5"
StrokeThickness="4"
Stretch="Fill"
Stroke="Blue" />
This will draw a plus sign on a button if the button is the only thing in window,
but how can one map the path to this button?
<ControlTemplate x:Key="BT_SIGN" TargetType="{x:Type Button}">
<Grid Cursor="None" Margin="0,0,1.333,0">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF1E8CF3" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
</ControlTemplate>
<Button
Grid.Column="3"
HorizontalAlignment="Left"
Height="44.8"
Width="75.2"
Margin="22.32,24.6,0,0"
VerticalAlignment="Top"
Template="{DynamicResource BT_SIGN}">
</Button>
Try this, i.e. add a <ContentPresenter /> to the template and set the Content property to your Path:
<ControlTemplate x:Key="BT_SIGN" TargetType="{x:Type Button}">
<Grid Cursor="None" Margin="0,0,1.333,0">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF1E8CF3" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<ContentPresenter />
</Grid>
</ControlTemplate>
<Button
Grid.Column="3"
HorizontalAlignment="Left"
Height="44.8"
Width="75.2"
Margin="22.32,24.6,0,0"
VerticalAlignment="Top"
Template="{DynamicResource BT_SIGN}">
<Path Data="M0.5,0 L0.5,1 M0,0.5 L1,0.5"
StrokeThickness="4"
Stretch="Fill"
Stroke="Blue" />
</Button>
Just set the Path of that specific button inside the button markup.
<Button
Grid.Column="3"
HorizontalAlignment="Left"
Height="44.8"
Width="75.2"
Margin="22.32,24.6,0,0"
VerticalAlignment="Top"
Template="{DynamicResource BT_SIGN}">
<Path Data="M0.5,0 L0.5,1 M0,0.5 L1,0.5"
StrokeThickness="4"
Stretch="Fill"
Stroke="Blue" />
</Button>

c# WPF application UI really slow on other computers

I don't know how vague this may sound, so if you require more information, please let me know!
I've finished my program, and I've attempted to try running it on other machines, I have not used any installers to deploy this, I just have been using the debug/release programName.exe after compiling it.
My question is that is there reason why my program is running incredibly slow when it's not running on the system it was compiled on? the entire UI lags, as in it takes several sections just to switch to another tab, while running on its native computer, it runs perfectly smooth.
I've tried the publish wizard, so I don't think that'll help. I was wondering if it has to do with any the my xaml, the DLLs, or the program's dependencies? At the moment, I don't have any sort of pictures or resources that it's relying on.
Any advice on any changes that I can make to get this running more smoothly would be greatly appreciated.
Here's my mainWindow Xaml:
<Window
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:custom="clr-namespace:RemotePatch"
x:Class="RemotePatch.MainWindow"
mc:Ignorable="d"
Title="Remote Patch" Height="350" Width="525" AllowsTransparency="True" WindowStyle="None" ResizeMode="CanResizeWithGrip" Loaded="Window_Loaded_1" Closed="Window_Closed">
<Window.Effect>
<DropShadowEffect BlurRadius="0" ShadowDepth="0" Direction="0" Opacity="0"/>
</Window.Effect>
<Grid RenderTransformOrigin="0.497,0.518">
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition/>
<RowDefinition Height="317*"/>
</Grid.RowDefinitions>
<Grid.Background>
<RadialGradientBrush Center="0.5,0.6">
<GradientStop Color="#FF1A8BA2"/>
<GradientStop Color="#FF293855" Offset="1"/>
<GradientStop Color="#FF1799AE" Offset="0.043"/>
</RadialGradientBrush>
</Grid.Background>
<Rectangle Fill="#FFF4F4F5" Height="29" Stroke="Black" VerticalAlignment="Top" Opacity="0" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"/>
<TabControl x:Name="tabControl" Margin="0,5,0,16" Grid.Row="2" >
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="4,4,4,4" Margin="2,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.Foreground>
<ImageBrush/>
</TabControl.Foreground>
<TabControl.BorderBrush>
<ImageBrush/>
</TabControl.BorderBrush>
<TabControl.Background>
<ImageBrush/>
</TabControl.Background>
<TabItem Header="General" Margin="0,7,0,-7">
<TabItem.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF040101" Offset="1"/>
</LinearGradientBrush>
</TabItem.Background>
<Grid>
<ListBox x:Name="listBox1" Margin="4,154,358,0" Foreground="White" Background="#FF14142E"/>
<TextBox x:Name="txtFile" Height="18" Margin="79,80,264,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="#FF14142E" Foreground="White" MinWidth="56"/>
<TextBox x:Name="txtPSexec" Height="18" Margin="79,47,264,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="#FF14142E" Foreground="White" MinWidth="56" />
<TextBox x:Name="txtGroups" HorizontalAlignment="Left" Height="18" Margin="79,119,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="65" Background="#FF14142E" Foreground="White"/>
<Button x:Name="buttonLoad" Content="Load File" Margin="4,78,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="56" Click="Load_Clicked">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="buttonSplit" Content="Split" Margin="4,117,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="56" Click="Split_Clicked">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="buttonValidate" Content="✔" Foreground="White" Height="15" VerticalAlignment="Top" HorizontalAlignment="Right" Width="15" Click="Validate_Clicked" FontSize="10.667" RenderTransformOrigin="0.062,0" Margin="0,154,358,0" FontWeight="Bold" >
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.413"/>
<GradientStop Color="#FF6C6C6C" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="buttonPsExec" Content="PsExec" Margin="4,46,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="58" Click="Psexec_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="buttonLoginMain" Content="Login" Margin="452,6,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="58" Click="Login_Clicked">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</Grid>
</TabItem>
<TabItem Header="Log" Margin="-3,7,3,-7">
<Grid>
<Grid.Background>
<ImageBrush/>
</Grid.Background>
<RichTextBox x:Name="richTextBox1" Margin="0,6,0,5" Background="Black" Foreground="White" TextChanged="richTextBox1_TextChanged" IsReadOnly="True">
<FlowDocument>
<Paragraph>
<Run Text="Remote Patch v2.0"/>
</Paragraph>
</FlowDocument>
</RichTextBox>
</Grid>
</TabItem>
<TabItem Header="Patch" Margin="-3,7,3,-7">
<Grid Margin="0,5,0.333,-5.333">
<Grid.Background>
<ImageBrush/>
</Grid.Background>
<Button x:Name="buttonLogin" Content="Login" Margin="0,10,1,0" Foreground="White" FontWeight="Bold" Grid.Row="2" Height="20" VerticalAlignment="Top" HorizontalAlignment="Right" Width="47" Click="Login_Clicked">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<GroupBox x:Name="groupBox" Header="Predefined Patches
" Margin="27,56,87,0" VerticalAlignment="Top" Height="55" Foreground="White">
<Button x:Name="buttonPredefined" Content="Run" Margin="9,-7,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="51" Click="buttonPredefined_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</GroupBox>
<ComboBox x:Name="comboBox" Margin="132,81,102,0" VerticalAlignment="Top" Background="#FF0F0F59" SelectionChanged="comboBox_SelectionChanged" Foreground="Black" />
<GroupBox x:Name="groupBox_Copy" Header="Batch File
" Margin="27,143,82,0" VerticalAlignment="Top" Height="55" Foreground="White">
<Button x:Name="buttonBatch" Content="Run" Margin="0,40,0,-43" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="51" Click="Batch_Clicked" Visibility="Hidden">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</GroupBox>
<TextBox x:Name="txtBatchFile" Height="23" Margin="127,168,102,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="#FF14142E" Foreground="White"/>
<Button x:Name="ButtonRunBatch" Content="Run" Margin="42,168,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="51" Click="loopBatch_Clicked">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="buttonAddFile" Content="+" Margin="0,168,47,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" Click="Add_Clicked" HorizontalAlignment="Right" Width="30">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Grid HorizontalAlignment="Left" Height="35" Margin="182,198,0,0" VerticalAlignment="Top" Width="106">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="40" Margin="25,5,-13,-10" VerticalAlignment="Top" Width="94">
<TextBox x:Name="numerical" TextWrapping="Wrap" Width="34" Margin="0,10,0,9.667" Background="#FF14142E" Foreground="White" TextChanged="textBox_TextChanged"/>
<Button x:Name="button1" Content="-" HorizontalAlignment="Left" VerticalAlignment="Top" Width="14" Height="19" Margin="0,10,0,0" Background="#FFFFEFEF" FontSize="10.667" FontWeight="Bold" Click="button1_Click"/>
<Button x:Name="button" Content="+" HorizontalAlignment="Left" VerticalAlignment="Top" Width="14" Height="19" Margin="0,10,0,0" FontSize="10.667" FontWeight="Bold" Click="addNumValue"/>
</StackPanel>
</Grid>
<Label x:Name="label2" Content="Groups" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="209,231,0,0" Foreground="White"/>
</Grid>
</TabItem>
</TabControl>
<Button x:Name="button2" Content="-" Margin="0,2,53,10" Foreground="White" FontWeight="Bold" HorizontalAlignment="Right" Width="21" Click="Minimize_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="button2_Copy" Margin="0,2,27,10" Foreground="White" HorizontalAlignment="Right" Width="21" Click="Maximize_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
<Canvas>
<Rectangle Height="9" Width="9" Stroke="White" Canvas.Top="-2" Canvas.Left="-4"/>
<Rectangle Height="10" Width="10" Stroke="White" Canvas.Left="-2" Canvas.Top="-7" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-0.715"/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Button>
<Button x:Name="button2_Copy1" Content="X" Margin="0,2,0,10" Foreground="White" FontWeight="Bold" HorizontalAlignment="Right" Width="22" Click="button2_Copy1_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Label x:Name="label" Content="Remote Patch" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Width="108" Foreground="White" FontSize="16" IsHitTestVisible="False"/>
<Rectangle Grid.Row="2" Height="20" VerticalAlignment="Bottom" Fill="Transparent" Margin="-1,0,0,0"/>
<Label x:Name="label1" Content="Authenticated" HorizontalAlignment="Left" Grid.Row="2" Width="84" RenderTransformOrigin="0.5,0.5" Foreground="White" Height="23" VerticalAlignment="Bottom">
<Label.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="-0.718"/>
<RotateTransform/>
<TranslateTransform Y="-0.294"/>
</TransformGroup>
</Label.RenderTransform>
</Label>
<Ellipse x:Name="authColor" Fill="Red" HorizontalAlignment="Left" Margin="83,0,0,4" Grid.Row="2" Stroke="Black" Width="13" Height="13" VerticalAlignment="Bottom"/>
<Label x:Name="labelSettings" Content="Settings" Margin="0,-1,84,0" VerticalAlignment="Top" Foreground="#FF595555" FontWeight="Bold" HorizontalAlignment="Right" Width="56" MouseLeftButtonDown="labelSettings_MouseLeftButtonDown"/>
<Rectangle x:Name="rectangleNotification" Fill="#FFDDFF03" Grid.Row="2" Stroke="Black" Height="25" VerticalAlignment="Bottom" Opacity="0" Margin="0,0,1,0"/>
<Rectangle Height="2" Margin="30,31,30,0" Stroke="#FF444444" VerticalAlignment="Top" Grid.RowSpan="2" Opacity="0.5"/>
</Grid>
</Window>
You have a DropShadowEffect applied to your Window.
This is a problem because the DropShadowEffect uses all descendant objects to calculate the shape of the shadow. That means every single object contained in your Window is being inspected by this effect while rendering -- this takes a really long time.
Your shadow effect has 0 opacity anyway so you could just remove it.
Alternatively, you should apply the effect to a child of the Window, but make sure that child has no descendants.
The trick I use to apply the shadow to a window without destroying performance is to surround the contents of my window in a grid, place a border (or similar object) at the top of said grid (remember to assign a background to the border otherwise you won't get a shadow) and then apply the effect to the border instead of your window.
Before:
<Window x:Class="MyProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="400"
WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Window.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="0"/>
</Window.Effect>
<StackPanel Margin="8" Background="White">
<Button Margin="4">Test</Button>
<Button Margin="4">Test</Button>
<Button Margin="4">Test</Button>
</StackPanel>
</Window>
After:
<Window x:Class="MyProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="400"
WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Grid Margin="8">
<Border Background="White">
<Border.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="0"/>
</Border.Effect>
</Border>
<StackPanel>
<Button Margin="4">Test</Button>
<Button Margin="4">Test</Button>
<Button Margin="4">Test</Button>
</StackPanel>
</Grid>
</Window>
This provides the exact same appearance, but with better performance because:
The buttons are no longer involved in the calculation of the shadow
The border has no descendants, so the effect is only using the layout of the border in the calculation
General rule of thumb... Only apply the drop shadow effect to objects whose ancestors are intended to be affected by the effect.

How to get button border and Half of Oval Style in WPF Button?

I have tried to make a button style in wpf. But I have faced to issue.
1) Button Inside Style want to Half of the Oval.
2) Button Border with Gold Color & #872234 Color
My XAML CODE-
<Window x:Class="Kiosk_Testing.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- the background for the button -->
<Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#872234" Offset="0"/>
<GradientStop Color="#872234" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- the "gel" hilight at the top of the button -->
<Rectangle RadiusX="20" RadiusY="30" Margin="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- place for the content inside the button to be displayed -->
<ContentPresenter Grid.RowSpan="2"
x:Name="PrimaryContent"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="gold" />
</Style>
</Window.Resources>
<Grid>
<Button BorderThickness="50" HorizontalAlignment="Center" Content="Button" FontSize="26" FontFamily="Times New Roman" VerticalAlignment="Center" Width="163" Height="58" Margin="146,168,194,85">
<Button.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="Gold" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="Gold" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Button.BorderBrush>
</Button>
</Grid>
</Window>
If using Border instead of Rectangle an option for you, then you can use the below Border XAML to replace your Rectangle XAML:
<Border Margin="5" CornerRadius="14,14,4,4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
You could tweak the CornerRadius property to get the desired rounded corners.
Complete Style:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- the background for the button -->
<Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#872234" Offset="0"/>
<GradientStop Color="#872234" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- the "gel" hilight at the top of the button -->
<Border Margin="5" CornerRadius="14,14,4,4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<!-- place for the content inside the button to be displayed -->
<ContentPresenter Grid.RowSpan="2"
x:Name="PrimaryContent"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="gold" />
</Style>
And resulting graphic:
UPDATE
I guess, you wanted your button to have the Golden color border as well. Updated Style with Golden Border:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="2" CornerRadius="28" BorderBrush="GoldenRod">
<Border BorderThickness="2" CornerRadius="27">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="Gold" Offset="0"/>
<GradientStop Color="Wheat" Offset="0.6"/>
<GradientStop Color="Gold" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border BorderThickness="2" CornerRadius="26" BorderBrush="Gold">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- the background for the button -->
<Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#872234" Offset="0"/>
<GradientStop Color="#872234" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- the "gel" hilight at the top of the button -->
<Border Margin="5" CornerRadius="14,14,4,4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<!-- place for the content inside the button to be displayed -->
<ContentPresenter Grid.RowSpan="2"
x:Name="PrimaryContent"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
/>
</Grid>
</Border>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="gold" />
</Style>

ScollViewer in a FlipView

This is a example for reproducing my problem
<FlipView>
<FlipView.Resources>
<Style TargetType="FlipViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlipViewItem">
<ScrollViewer HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center" >
<ContentPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</FlipView.Resources>
<Rectangle Width="1366" Height="768" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
<GradientStop Color="White"/>
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="White" Offset="0.487"/>
<GradientStop Color="Black" Offset="0.44"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</FlipView>
the scrollviewer's horizental offset will be set back to 0 automatically after you change it.
i think this always happens to the direction which is the same as flipview's scroll direction.
but,how to fix it?
The default ScrollViewer only scrolls when it needs to and your rectangle is smaller than the ScrollViewer. Also - you only have one item. You can try setting its style: Style="{StaticResource HorizontalScrollViewerStyle}". As in these:
<Page
x:Class="App113.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App113"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid
Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<LinearGradientBrush
x:Key="LibearBrush"
EndPoint="0,0"
StartPoint="1,1">
<GradientStop
Color="White" />
<GradientStop
Color="Black"
Offset="1" />
<GradientStop
Color="White"
Offset="0.487" />
<GradientStop
Color="Black"
Offset="0.44" />
</LinearGradientBrush>
</Grid.Resources>
<FlipView>
<FlipView.Resources>
<Style
TargetType="FlipViewItem">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="FlipViewItem">
<!--Style="{StaticResource VerticalScrollViewerStyle}" is the standard alternative-->
<ScrollViewer
Style="{StaticResource HorizontalScrollViewerStyle}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
<ContentPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</FlipView.Resources>
<Rectangle
Width="2366"
Height="1768"
Fill="{StaticResource LibearBrush}" />
<Rectangle
Width="2366"
Height="1768"
Fill="{StaticResource LibearBrush}" />
<Rectangle
Width="2366"
Height="1768"
Fill="{StaticResource LibearBrush}" />
</FlipView>
</Grid>
</Page>

Silverlight change button text

I have a button with multiple contetnt. I want to change it's text when the button is clicked.
XAML:
<Button HorizontalAlignment="Left" Height="114" Margin="33,58,0,0" VerticalAlignment="Top" Width="224" Style="{StaticResource GlassButtonStyle}" FontSize="26.667" Click="Button_Click_1" Name="button1">
<StackPanel Orientation="Horizontal">
<Rectangle Height="69" Stroke="Black" Width="69">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.004,1.044" StartPoint="0.739,0.25">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Content="Clicke me" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
C# code:
button1.Content = "Hello world";
This makes the rectangle disappear, though I want only to change the text. How can I do this?
You need to modify the Control Template of Button to show your rectangle all the time.
<Button HorizontalAlignment="Left" Height="114" Margin="33,58,0,0" VerticalAlignment="Top" Width="224" Style="{StaticResource GlassButtonStyle}" FontSize="26.667" Click="Button_Click_1" Name="button1" Content="Click Me">
<Button.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Height="69" Stroke="Black" Width="69">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.004,1.044" StartPoint="0.739,0.25">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Content="{TemplateBinding Content}" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
See Using Control Templates to Customize a Control's Look and Feel

Categories