ScrollViewer in a ListBox not working. WPF - wpf

I have the following defined in my control:
<Style TargetType="primitives:CalendarDayButton" x:Key="EventCalendarDayButton">
<Setter Property="Background" Value="#FFBADDE9"/>
<Setter Property="MinWidth" Value="5"/>
<Setter Property="MinHeight" Value="5"/>
<Setter Property="FontSize">
<Setter.Value>
<Binding Path="DayFontSize">
<Binding.RelativeSource>
<RelativeSource Mode="FindAncestor" AncestorType="{x:Type toolkit:Calendar}" />
</Binding.RelativeSource>
</Binding>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Right"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:CalendarDayButton">
<Grid MouseDown="Grid_MouseDown">
<Grid.RowDefinitions>
<RowDefinition Height="18" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle x:Name="SelectedBackground" Grid.Row="1" RadiusX="1" RadiusY="1" Opacity="0" Fill="{TemplateBinding Background}"/>
<Rectangle x:Name="Background" Grid.Row="1" RadiusX="1" RadiusY="1" Opacity="0" Fill="{TemplateBinding Background}" />
<Rectangle x:Name="InactiveBackground" Grid.Row="1" RadiusX="1" RadiusY="1" Opacity="0" Fill="#FFA5BFE1"/>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop x:Name="StartGradient" Color="#FFD5E2F2" Offset="0"/>
<GradientStop x:Name="EndGradient" Color="#FFB9C9DD" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter x:Name="NormalText" Margin="5,1,5,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextElement.Foreground>
<SolidColorBrush x:Name="selectedText" Color="#FF333333" />
</TextElement.Foreground>
</ContentPresenter>
</Border>
<Rectangle x:Name="Border" StrokeThickness="0.5" Grid.RowSpan="2" SnapsToDevicePixels="True">
<Rectangle.Stroke>
<SolidColorBrush x:Name="BorderBrush" Color="#FF5D8CC9"/>
</Rectangle.Stroke>
</Rectangle>
<Path x:Name="Blackout" Grid.Row="1" Opacity="0" Margin="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" Fill="#FF000000" Stretch="Fill" Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z"/>
<Rectangle Width="0" x:Name="DayButtonFocusVisual" Grid.Row="1" Visibility="Collapsed" IsHitTestVisible="false" RadiusX="1" RadiusY="1" Stroke="#FF45D6FA"/>
<Button x:Name="ActivateDayViewOnDay" Grid.Row="0" Opacity="0.3" Height="15" Margin="1,1,1,1" PreviewMouseLeftButtonDown="DayView_Click" />
<ScrollViewer Grid.Row="1" >
<ScrollViewer.Content>
<local:TestListBox
x:Name="eventsLbx"
Background="Transparent"
BorderBrush="Transparent"
>
<local:TestListBox.ItemsSource>
<MultiBinding Converter="{StaticResource calendarEventsConverter}">
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type local:EventCalendar}}" Path="CalendarEvents"/>
<Binding RelativeSource="{RelativeSource Mode=Self}" Path="DataContext"/>
</MultiBinding>
</local:TestListBox.ItemsSource>
<local:TestListBox.ItemTemplate>
<DataTemplate>
<TextBlock TextTrimming="CharacterEllipsis" HorizontalAlignment="Center" FontSize="12" Text="{Binding Text}" />
</DataTemplate>
</local:TestListBox.ItemTemplate>
</local:TestListBox>
</ScrollViewer.Content>
</ScrollViewer>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="eventsLbx" Property="HasItems" Value="False">
<Setter TargetName="eventsLbx" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now if there are more items than are visible, then the scrollviewer appears properly but the user CANNOT drag the scrollviewer middle button for scrolling.
The user can click on the arrows at the end of the scrollviewer to scroll but he cannot click the bar that appears on the scrollbar and drag it to actually scroll the contents.
I cannot figure out why this is happening...

If you want to scroll the items in your ListBox, you do not need to wrap it in a ScrollViewer. The ListBox natively supports scrolling. That means, if your ListBox is too small to display all its items, it automatically adds ScrollBars to the side.

Your ScrollViewer and ListBox are inside a Grid, and you have some code behind the MouseDown event of that Grid.
<Grid MouseDown="Grid_MouseDown">
Something you're doing in that method may be getting in the way of the mouse mechanisms of the ScrollViewer, disrupting event bubbling or something like that.
Check your code-behind, or post it here so we can help you with it :)

Related

How to force a usercontrol width to be equal designer width?

I have a custom textbox in WPF and I want to change its width while resizing it in designer view. I used Binding ActualHeight but it doesn't work.
As the picture shows I resized the TextBox in design mode but it is still in the same width, not changed. How can I change that control's Width(only) property according to resizing?
DottedTextBox
<UserControl x:Class="Easy_Message.DottedTextBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="400">
<Viewbox>
<TextBox x:Name="roottxt" Background="White"
BorderThickness="0" Width="{Binding ActualWidth,RelativeSource={RelativeSource TemplatedParent}}" Height="20">
<TextBox.Template>
<ControlTemplate TargetType="TextBox">
<Grid>
<Border x:Name="b" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
BorderThickness="1,0,1,0" BorderBrush="#c2c4cb">
<Border BorderThickness="0,1,0,0" BorderBrush="#9da0aa">
<Border BorderThickness="0,0,0,1" BorderBrush="#d9dae0">
<DockPanel>
<TextBox x:Name="orgbox" VerticalContentAlignment="Center"
HorizontalAlignment="Left"
BorderThickness="0"
FontSize="{TemplateBinding FontSize}"
Background="White"
Width="{Binding Path=Width,ElementName=b,Converter={StaticResource wconv}}" SelectionBrush="{TemplateBinding SelectionBrush}"
Height="20">
</TextBox>
<Border x:Name="brdDot" Background="{TemplateBinding Background}" Grid.Column="1"
Width="16" Height="{TemplateBinding Height}" HorizontalAlignment="Right"
BorderThickness="0">
<Canvas HorizontalAlignment="Right"
Width="10" Height="6"
Margin="0,0,2.5,2.5">
<Rectangle Width="1.5" Height="1.5" Fill="Black">
<Rectangle.RenderTransform>
<TranslateTransform X="0" Y="2"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="1.5" Height="1.5" Fill="Black">
<Rectangle.RenderTransform>
<TranslateTransform X="4" Y="2"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="1.5" Height="1.5" Fill="Black">
<Rectangle.RenderTransform>
<TranslateTransform X="8" Y="2"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Border>
</DockPanel>
</Border>
</Border>
</Border>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=brdDot}" Value="True">
<Setter TargetName="brdDot" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="White" Offset="-0.1"/>
<GradientStop Color="#ccdfff" Offset="0.6" />
<GradientStop Color="White" Offset="1.1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="brdDot" Property="BorderThickness" Value="1,0,0,0" />
<Setter TargetName="brdDot" Property="BorderBrush" Value="#ccc9c9"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Viewbox>

WPF - Custom Tab Control Binding

I'm creating a custom tab control and the tabs were working fine, but when I click a button in my toolbar, the selected tab disappears.
How do I get the selected tab to remain Visible until the next tab is selected?
How do I bind the Visibility of the selected tab with the Visibility of it's corresponding toolbar and DataGrid? (Example: If I click on Tab2, I want Tab2Tools and dgTab2 to become Visible, and all other TabTools and DataGrids to be Hidden or Collapsed.
<Window x:Class="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>
<Color x:Key="TabGradientTop">#FFFFFFFF</Color>
<Color x:Key="TabGradientBottom">#FFC0CBE8</Color>
<SolidColorBrush x:Key="TabBarText" Color="#FF353C66"/>
<SolidColorBrush x:Key="TabBarTop" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="TabBarBottom" Color="#FFC0CBE8"/>
<SolidColorBrush x:Key="TabBarBorder" Color="#FF8E96AC"/>
<SolidColorBrush x:Key="TabMou5eOverColor" Color="#FFFFB700"/>
<Style x:Key="TabStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{DynamicResource TabBarText}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="TabNormal" Fill="Transparent"/>
<Rectangle x:Name="TabMou5eOver" Fill="{StaticResource TabBarBottom}" Height="30" Stroke="{StaticResource TabMou5eOverColor}" StrokeThickness="1" RadiusY="4" RadiusX="4" Visibility="Hidden" />
<Rectangle x:Name="TabMou5eOver2" Fill="{StaticResource TabBarBorder}" Height="1" VerticalAlignment="Bottom" Visibility="Hidden" />
<Rectangle x:Name="TabMou5ePressed" Fill="{StaticResource TabBarTop}" Height="30" Stroke="{StaticResource TabBarBorder}" RadiusY="4" RadiusX="4" Visibility="Hidden" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Visibility" TargetName="TabMou5eOver2" Value="Visible"/>
<Setter Property="Visibility" TargetName="TabMou5eOver" Value="Visible"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Visibility" TargetName="TabMou5ePressed" Value="Visible"/>
</Trigger>
<Trigger Property="IsDefaulted" Value="True">
<Setter Property="Visibility" TargetName="TabMou5ePressed" Value="Visible"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Visibility" TargetName="TabMou5ePressed" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="InvisiStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{DynamicResource TabBarText}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="Transparent">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<!--Gadients-->
<StackPanel Orientation="Vertical">
<Rectangle Height="46">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{StaticResource TabGradientBottom}" Offset="0.25"/>
<GradientStop Color="{StaticResource TabGradientTop}"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Height="1" Fill="{StaticResource TabBarBorder}"/>
<Rectangle Height="87">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{StaticResource TabGradientBottom}" Offset="0.45" />
<GradientStop Color="{StaticResource TabGradientTop}"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Height="1" Fill="{StaticResource TabBarBottom}" Opacity="0.5"/>
<Rectangle Height="1" Fill="{StaticResource TabBarBottom}"/>
<Rectangle Height="1" Fill="{StaticResource TabBarBorder}"/>
</StackPanel>
<!--Tabs-->
<Grid Margin="15,22,0,0">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Button x:Name="cmdTab1" Content="Tab1" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" IsDefault="True"/>
<Button x:Name="cmdTab2" Content="Tab2" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" />
<Button x:Name="cmdTab3" Content="Tab3" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" />
<Button x:Name="cmdTab4" Content="Tab4" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" />
</StackPanel>
</Grid>
<!--Tool Bars-->
<StackPanel x:Name="Tab1Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top">
<StackPanel Orientation="Vertical">
<Button x:Name="Tab1Login" Content="Login" Height="18" Margin="5,0,0,0" Style="{DynamicResource InvisiStyle}"/>
<Button x:Name="Tab1Request" Content="Request Password" Height="18" Margin="5,0,0,0" Style="{DynamicResource InvisiStyle}"/>
<Rectangle Fill="{StaticResource TabBarBorder}" Height="1" Margin="5,5,5,0"/>
<Rectangle Fill="{StaticResource TabBarTop}" Height="1" Margin="5,0,5,5" Opacity="0.5"/>
<Button x:Name="Tab1Exit" Content="Exit" Height="18" Margin="5,0,0,0" Style="{DynamicResource InvisiStyle}"/>
</StackPanel>
</StackPanel>
<StackPanel x:Name="Tab2Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top" Visibility="Hidden" />
<StackPanel x:Name="Tab3Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top" Visibility="Hidden" />
<StackPanel x:Name="Tab4Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top" Visibility="Hidden" />
<!--Data Grids-->
<DataGrid x:Name="dgTab2" ItemsSource="{Binding}" Margin="0,137,0,0" AutoGenerateColumns="True" Visibility="Collapsed" />
<DataGrid x:Name="dgTab3" ItemsSource="{Binding}" Margin="0,137,0,0" AutoGenerateColumns="True" Visibility="Collapsed" />
<DataGrid x:Name="dgTab4" ItemsSource="{Binding}" Margin="0,137,0,0" AutoGenerateColumns="True" Visibility="Collapsed" />
</Grid>
</Window>
You can bind the button click using Command property in your viewmodel and define a method using delegates. In your method you can set the visibility of datagrids as per the requirement.
Regarding your first query, I simply copied your code on my local and tried executing it, I do not see any tabs becoming invisible while the other one is selected.

WPF C# button style

Would somebody know how to recreate this button style in WPF? As I do not know how to make the different compartments. As well as the 2 different texts and text styles?
To solve your question definitely need to use the Style and Template for the Button. But how exactly does he look like? Decisions may be several. For example, Button are two texts to better define the relevant TextBlocks? Can be directly in the template, but then use the buttons will be limited, because the template can be only one ContentPresenter. I decided to do things differently, to identify one ContentPresenter with an icon in the form of a Path, and the content is set using the buttons on the side.
The style:
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#373737" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}">
<Grid>
<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<Setter TargetName="PathIcon" Property="Fill" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Sample of using:
<Button Width="200" Height="50" VerticalAlignment="Top" Margin="0,20,0,0" />
<Button.Content>
<StackPanel>
<TextBlock Text="Watch Now" FontSize="20" />
<TextBlock Text="Duration: 50m" FontSize="12" Foreground="Gainsboro" />
</StackPanel>
</Button.Content>
</Button>
Output
It is best to StackPanel determine the Resources and set the Button so:
<Window.Resources>
<StackPanel x:Key="MyStackPanel">
<TextBlock Name="MainContent" Text="Watch Now" FontSize="20" />
<TextBlock Name="DurationValue" Text="Duration: 50m" FontSize="12" Foreground="Gainsboro" />
</StackPanel>
</Window.Resources>
<Button Width="200" Height="50" Content="{StaticResource MyStackPanel}" VerticalAlignment="Top" Margin="0,20,0,0" />
The question remains with setting the value for TextBlock Duration, because this value must be dynamic. I implemented it using attached DependencyProperty. Set it to the window, like that:
<Window Name="MyWindow" local:MyDependencyClass.CurrentDuration="Duration: 50m" ... />
Using in TextBlock:
<TextBlock Name="DurationValue" Text="{Binding ElementName=MyWindow, Path=(local:MyDependencyClass.CurrentDuration)}" FontSize="12" Foreground="Gainsboro" />
In fact, there is no difference for anyone to determine the attached DependencyProperty, because it is the predominant feature.
Example of set value:
private void Button_Click(object sender, RoutedEventArgs e)
{
MyDependencyClass.SetCurrentDuration(MyWindow, "Duration: 101m");
}
A complete listing of examples:
XAML
<Window x:Class="ButtonHelp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ButtonHelp"
Name="MyWindow"
Title="MainWindow" Height="350" Width="525"
WindowStartupLocation="CenterScreen"
local:MyDependencyClass.CurrentDuration="Duration: 50m">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#373737" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="FontFamily" Value="./#Segoe UI" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}">
<Grid>
<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<Setter TargetName="PathIcon" Property="Fill" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<StackPanel x:Key="MyStackPanel">
<TextBlock Name="MainContent" Text="Watch Now" FontSize="20" />
<TextBlock Name="DurationValue" Text="{Binding ElementName=MyWindow, Path=(local:MyDependencyClass.CurrentDuration)}" FontSize="12" Foreground="Gainsboro" />
</StackPanel>
</Window.Resources>
<Grid>
<Button Width="200" Height="50" Content="{StaticResource MyStackPanel}" VerticalAlignment="Top" Margin="0,20,0,0" />
<Button Content="Set some duration" Style="{x:Null}" Width="140" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left" Click="Button_Click" />
</Grid>
Code behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
MyDependencyClass.SetCurrentDuration(MyWindow, "Duration: 101m");
}
}
public class MyDependencyClass : DependencyObject
{
public static readonly DependencyProperty CurrentDurationProperty;
public static void SetCurrentDuration(DependencyObject DepObject, string value)
{
DepObject.SetValue(CurrentDurationProperty, value);
}
public static string GetCurrentDuration(DependencyObject DepObject)
{
return (string)DepObject.GetValue(CurrentDurationProperty);
}
static MyDependencyClass()
{
PropertyMetadata MyPropertyMetadata = new PropertyMetadata("Duration: 0m");
CurrentDurationProperty = DependencyProperty.RegisterAttached("CurrentDuration",
typeof(string),
typeof(MyDependencyClass),
MyPropertyMetadata);
}
}
Here's my attempt. Looks more similar to the OP's sample and provides settable properties for icon (FrameworkElement), title (string) and subtitle (string). The output looks like this:
Here's XAML:
<Button x:Class="Controls.FancyButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Controls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" Width="300" Height="80"
BorderBrush="{x:Null}" BorderThickness="0">
<Button.Effect>
<DropShadowEffect BlurRadius="12" Color="Gray" Direction="270" Opacity=".8" ShadowDepth="3" />
</Button.Effect>
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid Width="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=ActualWidth}"
Height="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=ActualHeight}">
<Border x:Name="MainBorder" CornerRadius="3" Grid.ColumnSpan="2" Margin="0,0,4,4" BorderBrush="Black" BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF5E5E5E" Offset="0" />
<GradientStop Color="#FF040404" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.2*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Border CornerRadius="2" Margin="0" BorderBrush="LightGray" BorderThickness="0,1,0,0" Grid.ColumnSpan="2" Grid.RowSpan="2" />
<Line X1="10" Y1="0" X2="10" Y2="10" Stretch="Fill" Grid.Column="0" HorizontalAlignment="Right" Stroke="#0C0C0C" Grid.RowSpan="2" />
<Line X1="10" Y1="0" X2="10" Y2="10" Stretch="Fill" Grid.Column="1" HorizontalAlignment="Left" Grid.RowSpan="2">
<Line.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#4D4D4D" Offset="0" />
<GradientStop Color="#2C2C2C" Offset="1" />
</LinearGradientBrush>
</Line.Stroke>
</Line>
<ContentControl HorizontalAlignment="Center" VerticalAlignment="Center" Grid.RowSpan="2">
<ContentControl.Content>
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Image">
<Binding.FallbackValue>
<Path Data="M0,0 L30,15 L0,30Z">
<Path.Effect>
<DropShadowEffect Direction="50" ShadowDepth="2" />
</Path.Effect>
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#4B86B2" Offset="0" />
<GradientStop Color="#477FA8" Offset="1" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</Binding.FallbackValue>
</Binding>
</ContentControl.Content>
</ContentControl>
<Grid Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="Title" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title, FallbackValue='Watch Now'}" Grid.Column="1" VerticalAlignment="Bottom" FontFamily="Calibri" FontWeight="Bold" FontSize="28" Foreground="White" Margin="20,0,0,0" />
<TextBlock x:Name="SubTitle" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SubTitle, FallbackValue='Duration: 50 min'}" Grid.Column="1" Grid.Row="1" VerticalAlignment="top" FontFamily="Calibri" FontSize="14" Foreground="White" Margin="20,0,0,0" />
</Grid>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Title" Property="TextDecorations" Value="Underline" />
<Setter TargetName="SubTitle" Property="TextDecorations" Value="Underline" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MainBorder" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF5E5E5E" Offset="0" />
<GradientStop Color="#FFA4A4A4" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Here's the code-behind:
using System.Windows;
using System.Windows.Controls;
namespace Controls
{
public partial class FancyButton : Button
{
public FancyButton()
{
InitializeComponent();
}
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(FancyButton), new FrameworkPropertyMetadata("Title", FrameworkPropertyMetadataOptions.AffectsRender));
public string SubTitle
{
get { return (string)GetValue(SubTitleProperty); }
set { SetValue(SubTitleProperty, value); }
}
public static readonly DependencyProperty SubTitleProperty =
DependencyProperty.Register("SubTitle", typeof(string), typeof(FancyButton), new FrameworkPropertyMetadata("SubTitle", FrameworkPropertyMetadataOptions.AffectsRender));
public FrameworkElement Image
{
get { return (FrameworkElement)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(FrameworkElement), typeof(FancyButton), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
}
}
Here is how to use it:
<controls:FancyButton Grid.Row="1" HorizontalAlignment="Right" Margin="3" Title="Watch Now" SubTitle="Duration: 50 min">
<controls:FancyButton.Image>
<Path Data="M0,0 L30,15 L0,30Z">
<Path.Effect>
<DropShadowEffect Direction="50" ShadowDepth="2" />
</Path.Effect>
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#4B86B2" Offset="0" />
<GradientStop Color="#477FA8" Offset="1" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</controls:FancyButton.Image>
</controls:FancyButton>
<!--Customize button -->
<LinearGradientBrush x:Key="Buttongradient" StartPoint="0.500023,0.999996" EndPoint="0.500023,4.37507e-006">
<GradientStop Color="#5e5e5e" Offset="1" />
<GradientStop Color="#0b0b0b" Offset="0" />
</LinearGradientBrush>
<Style x:Key="hhh" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{DynamicResource Buttongradient}"/>
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0.5">
<Border.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="2"></DropShadowEffect>
</Border.Effect>
<Grid>
<Path Width="9" Height="16.5" Stretch="Fill" Fill="#000" HorizontalAlignment="Left" Margin="16.5,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z " Opacity="0.2">
</Path>
<Path x:Name="PathIcon" Width="8" Height="15" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z ">
<Path.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="5"></DropShadowEffect>
</Path.Effect>
</Path>
<Line HorizontalAlignment="Left" Margin="40,0,0,0" Name="line4" Stroke="Black" VerticalAlignment="Top" Width="2" Y1="0" Y2="640" Opacity="0.5" />
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<Setter TargetName="PathIcon" Property="Fill" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In this day and age of mouse driven computers and tablets with touch screens etc, it is often forgotten to cater for input via keyboard only. A button should support a focus rectangle (the dotted rectangle when the button has focus) or another shape matching the button shape.
To add a focus rectangle to the button, use this XAML (from this site).
Focus rectangle style:
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="2" StrokeThickness="1" Stroke="#60000000" StrokeDashArray="1 2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Applying the style to the button:
<Style TargetType="Button">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
...
<Button x:Name="mybtnSave" FlowDirection="LeftToRight" HorizontalAlignment="Left" Margin="813,614,0,0" VerticalAlignment="Top" Width="223" Height="53" BorderBrush="#FF2B3830" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontFamily="B Titr" FontSize="15" FontWeight="Bold" BorderThickness="2" TabIndex="107" Click="mybtnSave_Click" >
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF080505" Offset="1"/>
<GradientStop Color="White" Offset="0.536"/>
</LinearGradientBrush>
</Button.Background>
<Button.Effect>
<DropShadowEffect/>
</Button.Effect>
<StackPanel HorizontalAlignment="Stretch" Cursor="Hand" >
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3ED82E" Offset="0"/>
<GradientStop Color="#FF3BF728" Offset="1"/>
<GradientStop Color="#FF212720" Offset="0.52"/>
</LinearGradientBrush>
</StackPanel.Background>
<Image HorizontalAlignment="Left" Source="image/Append Or Save 3.png" Height="36" Width="203" />
<TextBlock HorizontalAlignment="Center" Width="145" Height="22" VerticalAlignment="Top" Margin="0,-31,-35,0" Text="Save Com F12" FontFamily="Tahoma" FontSize="14" Padding="0,4,0,0" Foreground="White" />
</StackPanel>
</Button>

WPF: LinearGradientBrush with Alpha not works in a Popup control?

I want to create a custom WPF dropdown menu, so I created a User control which contains a ToggleButton and a Popup control. The popup appears when I click on the button.
Now I want to add a mouse hover effect on the menu items in the popup: but the LinearGradientBrush is not working with alpha channels:
<UserControl.Resources>
...
<Style x:Key="SubMenuItemStyle" TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
<Rectangle x:Name="rectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"
Fill="{TemplateBinding Background}" />
<StackPanel>
<TextBlock x:Name="text" Text="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" />
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="#30000000"/>
<Setter Property="Fill" TargetName="rectangle">
<Setter.Value>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
<GradientStop Color="#10000000" Offset="0"/>
<GradientStop Color="#10FFFFFF" Offset="1"/>
<!-- Not works... -->
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" TargetName="text" Value="#FF9A9A9A"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Controls:ToggleImageButton Style="{DynamicResource ArrowMenuStyle}" x:Name="imageButton" Height="21" />
<Popup x:Name="popup" PlacementTarget="{Binding ElementName=imageButton}" Placement="Bottom" StaysOpen="False" IsOpen="{Binding ElementName=imageButton, Path=IsChecked}">
<ItemsControl ItemsSource="{Binding MenuCommands}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding Name}" Command="{Binding Command}" Background="{Binding ElementName=popupMenuControl, Path=MenuBackground}" Foreground="{Binding ElementName=popupMenuControl, Path=MenuForeground}" Click="MenuItem_Click" Style="{StaticResource SubMenuItemStyle}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Popup>
</Grid>
When I set the GradientBrush to this, everything works fine:
<LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
<GradientStop Color="Green" Offset="0"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
But it seems the Alpha channel breaks the whole thing, and what I see is a black rectangle.
...Any idea?
If I put the MenuItems inside a Menu container, the Menu overrides my styles...
Thanks in advance!
have you set AllowsTransparency to true?

How to make a TextBox with a Button inside in WPF?

I'd like to make a TextBox with a Button inside, something like a DatePicker, but not exactly. Or can it be a ComboBox inside the TextBox, so you can switch the mode of the TextBox.
Can you help me?
If you want something like a combobox or a date time picker you should create a new control, inside this new control place a text box and a button side by side inside a frame that looks like the frame of a textbox - then restyle the textbox so it doesn't have a frame.
putting a button inside a rich edit is great if you want to put a button inside a "document" but not a good substitute for a combobox.
See the ComboBox control template MSDN
I created a textbox control and added this
It seems to work, but not the ideal situation cos it recreates another textbox.
<TextBox.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions></Grid.ColumnDefinitions>
<TextBox Grid.Column="0"></TextBox>
<Button HorizontalAlignment="Right" Width="25" Grid.Column="1">
</Button>
</Grid>
</ControlTemplate>
</TextBox.Template>
Simple solution
You can fake the fact that the button is in the TextBox by putting the Button over the TextBox. Don’t forget to put padding on your TextBox to avoid text going behind the Button.
Code example with StackPanel :
<StackPanel Orientation="Horizontal">
<TextBox Width="200" Padding="0,0,30,0" Height="30" FontSize="16"/>
<Button Width="20" Height="20" Margin="-30,0,0,0"/>
</StackPanel>
Code example with Grid :
<Grid>
<TextBox Width="200" Padding="0,0,30,0" Height="30" FontSize="16"/>
<Button Width="20" Height="20" HorizontalAlignment="Right" Margin="0,0,5,0"/>
</Grid>
Result :
You may find this link helps: http://msdn.microsoft.com/en-us/library/ms752068(VS.85).aspx.
"The ControlTemplate for a TextBox must contain exactly one element that is tagged as the content host element; this element will be used to render the contents of the TextBox. To tag an element as the content host, assign it the special name PART_ContentHost. The content host element must be either a ScrollViewer or an AdornerDecorator. The content host element may not host any child elements."
You can use RichTextBox instead of textbox and it support flowdocument in which you can place the button in it.
You can also use a Label and change its template to include a Button in it. To have a good overview of differences between Label and TextBlock see this post.
The correct method of doing this is to use a control template on the textbox. Something like below. I used this inside a class that inherits from textbox and called it ButtonBox. I then inherit others from this such as DateBox, DateTimeBox, SqlServerConnectBox etc.
xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<mwt:ListBoxChrome
Background="{TemplateBinding Panel.Background}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
BorderThickness="{TemplateBinding Border.BorderThickness}"
RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}"
RenderFocused="{TemplateBinding UIElement.IsKeyboardFocusWithin}"
Name="Bd"
SnapsToDevicePixels="True">
<DockPanel>
<Button DockPanel.Dock="Right" Name="myButton" Padding="3,0" Click="myButton_Click">...</Button>
<ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"></ScrollViewer>
</DockPanel>
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</TextBox.Template>
Edit: I've change the method I was using so that it inherits from control and not textbox. This works well because the control just consists of a border, a textbox and a button. I was getting focus issues with the above solution. This is new template, I have called my control a ButtonBox
<Style TargetType="{x:Type local:ButtonBox}">
<Setter Property="Border.BorderThickness" Value="1"></Setter>
<Setter Property="Border.BorderBrush">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,20" MappingMode="Absolute">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FFABADB3" Offset="0.05" />
<GradientStop Color="#FFE2E3EA" Offset="0.07" />
<GradientStop Color="#FFE3E9EF" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ButtonBox}">
<mwt:ListBoxChrome
Background="{TemplateBinding Panel.Background}"
BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}"
RenderFocused="{TemplateBinding UIElement.IsKeyboardFocusWithin}"
Name="Bd"
SnapsToDevicePixels="True">
<DockPanel>
<Button
DockPanel.Dock="Right"
Name="PART_Button"
Height="0"
Style="{x:Null}"
Margin="0"
Padding="3,0"
Content="{TemplateBinding local:ButtonBox.ButtonContent}"
IsTabStop="False">
</Button>
<TextBox
BorderBrush="{x:Null}"
BorderThickness="0"
Margin="0"
Name="PART_ContentHost"
IsReadOnly="{TemplateBinding TextBox.IsReadOnly}"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Path=Text}">
</TextBox>
<!-- ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Margin="1"></ScrollViewer -->
</DockPanel>
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="False"></Setter>
</Style>
Just use Grid.Column same like below code
<TextBox x:Name="txtUrl" Grid.Column="1" Margin="2,2,0,2" VerticalAlignment="Center" Padding="2" PreviewKeyDown="txtUrl_PreviewKeyDown" GotFocus="txtUrl_GotFocus" PreviewMouseDown="txtUrl_PreviewMouseDown">
</TextBox>
<eo:BareButton x:Name="btnAddFavorite" Grid.Column=" 1" HorizontalAlignment="Right" Style="{StaticResource WindowButtonStyle }" Margin="2" >
<eo:BareButton.Template>
<ControlTemplate TargetType="{x:Type eo:BareButton}">
<Border x:Name="PART_Border" Width="22" Height="22" Background="Transparent" VerticalAlignment="Center" Margin="2,0,0,0" CornerRadius="2">
<Path
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="Yellow"
Data="M 2,9 L 8,8 10,2 13,8 19,9 15,13 16,19 10,15 5,19 6,13 2,9"
SnapsToDevicePixels="false"
Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type eo:BareButton}, Mode=FindAncestor}}"
StrokeThickness="1" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Border" Property="BorderBrush" Value="#666"/>
<Setter TargetName="PART_Border" Property="BorderThickness" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</eo:BareButton.Template>
</eo:BareButton>
You may use a grid to accomplish this task. The following is how I created a button which appears at the right bottom of a TextBox:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="0" />
<Button Content="Copy" Width="40" Height="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" Grid.Row="0" />
</Grid>

Resources