White border on canvas - wpf
I'm using some code to animate my text so it goes from left to right.
But I'm getting a white border and I don't know why.
Code to animate
public UserControlButton()
{
this.InitializeComponent();
this.Loaded += new RoutedEventHandler(UserControlButton_Loaded);
}
void UserControlButton_Loaded(object sender, RoutedEventArgs e)
{
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.From = -UserStatusLabel.ActualWidth;
doubleAnimation.To = UserStatusLabelContainer.ActualWidth;
doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
doubleAnimation.Duration = new Duration(TimeSpan.Parse("0:0:10"));
UserStatusLabel.BeginAnimation(Canvas.LeftProperty, doubleAnimation);
}
This is a screenshot
As you can see, I don't want the border around the canvas.
But it is only when there is text at a border
This is my xaml
<UserControl
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:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
mc:Ignorable="d"
xmlns:converters="clr-namespace:UserControlSolution.Converter"
x:Class="UserControlSolution.UserControlButton"
x:Name="UserControl"
Height="50" Background="#FF2F2F2F"
VerticalAlignment = "Top"
Margin="2,0,0,5"
>
<UserControl.Resources>
<converters:StatusEnumToStatusResourceConverter x:Key="StatusIconConverter"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Height="50" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="UserCallAlarmPanel" VerticalAlignment="Top" Grid.Column="0" Background="{DynamicResource DarkGrey}" Margin="0,0,2,0" HorizontalAlignment="Left">
<WrapPanel Name="CallPanel" Height="25" Visibility="Visible" MouseLeftButtonDown="CallPanel_MouseLeftButtonDown">
<WrapPanel.Resources>
<Style TargetType="{x:Type WrapPanel}">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=CallPanel}" Value="True" >
<Setter Property="Background" Value="{StaticResource LightGrey}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</WrapPanel.Resources>
<Viewbox Height="25" Visibility="Visible">
<ContentControl Content="{DynamicResource calls_icon}"/>
</Viewbox>
</WrapPanel>
<WrapPanel Name="AlarmPanel" Height="25" Visibility="Visible" MouseLeftButtonDown="AlarmPanel_MouseLeftButtonDown">
<WrapPanel.Resources>
<Style TargetType="{x:Type WrapPanel}">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=AlarmPanel}" Value="True" >
<Setter Property="Background" Value="{StaticResource LightGrey}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</WrapPanel.Resources>
<Viewbox Height="25" Visibility="Visible">
<ContentControl Content="{DynamicResource alarm_icon}"/>
</Viewbox>
</WrapPanel>
</StackPanel>
<StackPanel x:Name="UserContainer" Orientation="Vertical" VerticalAlignment="Center" Grid.Column="1" Background="{DynamicResource DarkGrey}">
<TextBlock x:Name="NameLabel" FontSize="16" Foreground="#FFE5E5E5" Text="{Binding Name}" VerticalAlignment="Top" FontFamily="Segoe UI Semibold" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,2"/>
<Canvas Name="UserStatusLabelContainer" ClipToBounds="True" HorizontalAlignment="Stretch" Height="16">
<TextBlock x:Name="UserStatusLabel" Text="{Binding UserStatus}" TextWrapping="NoWrap" VerticalAlignment="Top" Foreground="#FFE5E5E5" />
</Canvas>
</StackPanel>
<WrapPanel Name="StatusIconContainer" Grid.Column="2" MouseLeftButtonDown="StatusIconContainer_MouseLeftButtonDown">
<WrapPanel.Resources>
<Style TargetType="{x:Type WrapPanel}">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=StatusIconContainer}" Value="True" >
<Setter Property="Background" Value="{StaticResource LightGrey}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</WrapPanel.Resources>
<Viewbox x:Name="StatusIconViewbox">
<ContentControl x:Name="StatusIcon" Content="{Binding Status, Converter={StaticResource StatusIconConverter}}" VerticalAlignment="Top" HorizontalAlignment="Center" />
</Viewbox>
</WrapPanel>
</Grid>
Resources:
<Application x:Class="UserControlSolution.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:clr="clr-namespace:System;assembly=mscorlib"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Canvas x:Key="status_offline" x:Shared="False" x:Name="status_offline" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="{DynamicResource Red}" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z " Stroke="{DynamicResource DarkGrey}"/>
</Canvas>
<Canvas x:Key="status_online" x:Shared="False" x:Name="status_online" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="{DynamicResource Green}" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z " Stroke="{DynamicResource DarkGrey}"/>
</Canvas>
<Canvas x:Key="status_redirect" x:Shared="False" x:Name="status_redirect" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="39.25" Height="28" Canvas.Left="19.0002" Canvas.Top="24" Stretch="Fill" Fill="{DynamicResource Blue}" Data="F1 M 19.0002,34L 19.0002,42L 43.7502,42L 33.7502,52L 44.2502,52L 58.2502,38L 44.2502,24L 33.7502,24L 43.7502,34L 19.0002,34 Z " Stroke="{DynamicResource DarkGrey}"/>
</Canvas>
<Canvas x:Key="status_sleeping" x:Shared="False" x:Name="status_sleeping" Width="75.9905" Height="75.9905" Clip="F1 M 0,0L 75.9905,0L 75.9905,75.9905L 0,75.9905L 0,0">
<Path Width="40.6287" Height="46.7808" Canvas.Left="17.4145" Canvas.Top="14.2482" Stretch="Fill" Fill="{DynamicResource Yellow}" Data="F1 M 41.1615,61.029C 28.0464,61.029 17.4145,50.3971 17.4145,37.2819C 17.4145,26.1675 25.0501,16.8364 35.3618,14.2482C 31.1173,18.5382 28.4964,24.4378 28.4964,30.9494C 28.4964,44.0645 39.1283,54.6964 52.2435,54.6964C 54.2442,54.6964 56.1871,54.449 58.0432,53.9831C 53.7389,58.3336 47.765,61.029 41.1615,61.029 Z M 49.9383,49.0772L 43.2883,49.0772L 43.2883,48.1882L 47.0243,43.3139L 43.7316,43.3139L 43.7316,41.6883L 49.9383,41.6883L 49.9383,42.7574L 46.3985,47.4517L 49.9383,47.4517L 49.9383,49.0772 Z M 56.2341,39.5784L 47.6841,39.5784L 47.6841,38.4354L 52.4875,32.1684L 48.2541,32.1684L 48.2541,30.0784L 56.2341,30.0784L 56.2341,31.4529L 51.683,37.4884L 56.2341,37.4884L 56.2341,39.5784 Z M 50.2606,28.4964L 39.8106,28.4964L 39.8106,27.0995L 45.6815,19.4398L 40.5073,19.4398L 40.5073,16.8853L 50.2606,16.8853L 50.2606,18.5653L 44.6982,25.942L 50.2606,25.942L 50.2606,28.4964 Z "/>
</Canvas>
<Canvas x:Key="status_pause" x:Shared="False" x:Name="status_pause" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="22.1667" Height="28.5" Canvas.Left="26.9167" Canvas.Top="23.75" Stretch="Fill" Fill="{DynamicResource Orange}" Data="F1 M 26.9167,23.75L 33.25,23.75L 33.25,52.25L 26.9167,52.25L 26.9167,23.75 Z M 42.75,23.75L 49.0833,23.75L 49.0833,52.25L 42.75,52.25L 42.75,23.75 Z "/>
</Canvas>
<Canvas x:Key="calls_icon" x:Shared="False" x:Name="calls_icon" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="26.1886" Height="41.1667" Canvas.Left="24.9057" Canvas.Top="17.4167" Stretch="Fill" Fill="{DynamicResource Green}" Data="F1 M 50.9225,54.2329C 51.037,54.5029 51.0943,54.7769 51.0943,55.0551C 51.0943,55.4396 50.992,55.7986 50.7875,56.132C 50.583,56.4654 50.2966,56.72 49.9285,56.8959L 48.1981,57.7059C 47.5231,58.0127 46.8471,58.2356 46.1701,58.3747C 45.4931,58.5138 44.809,58.5833 44.1176,58.5833C 43.005,58.5833 41.9056,58.3982 40.8195,58.028C 39.7334,57.6578 38.6944,57.1281 37.7024,56.4388C 36.7104,55.7495 35.7798,54.916 34.9105,53.9384C 34.0412,52.9607 33.263,51.8705 32.5757,50.6678C 32.138,50.0011 31.6778,49.2402 31.1951,48.3852C 30.7861,47.6571 30.3187,46.7848 29.7931,45.7682C 29.2674,44.7517 28.7366,43.6237 28.2008,42.3842C 27.6526,41.1447 27.218,40.0617 26.8968,39.1352C 26.5757,38.2086 26.3272,37.4386 26.1513,36.825C 25.9468,36.1091 25.8057,35.4955 25.7279,34.9841C 25.4457,34.0351 25.2381,33.0912 25.1051,32.1524C 24.9722,31.2136 24.9057,30.2839 24.9057,29.3635C 24.9057,28.1609 25.0264,27.0032 25.2677,25.8905C 25.5091,24.7779 25.8793,23.7429 26.3783,22.7857C 26.8774,21.8285 27.5104,20.9725 28.2775,20.2178C 29.0445,19.463 29.9516,18.8484 30.9988,18.3739L 32.7046,17.5885C 32.9746,17.4739 33.2446,17.4167 33.5146,17.4167C 33.895,17.4167 34.2488,17.522 34.5761,17.7327C 34.9033,17.9433 35.1488,18.2348 35.3124,18.6071L 38.5952,26.0623C 38.7097,26.3323 38.767,26.6023 38.767,26.8723C 38.767,27.2691 38.6647,27.6362 38.4602,27.9737C 38.2557,28.3112 37.9673,28.5638 37.595,28.7319L 34.2202,30.2839C 33.7743,30.4885 33.4327,30.7891 33.1955,31.1859C 32.9582,31.5827 32.8396,32.0102 32.8396,32.4684C 32.8396,32.8161 32.905,33.1433 33.0359,33.4501L 38.5768,46.1026C 38.7936,46.5894 39.0932,46.9474 39.4757,47.1764C 39.8582,47.4055 40.2744,47.5201 40.7244,47.5201C 41.0312,47.5201 41.3441,47.4505 41.6632,47.3114L 45.038,45.759C 45.3039,45.6445 45.5719,45.5872 45.8419,45.5872C 46.2141,45.5872 46.5659,45.6925 46.8973,45.9032C 47.2286,46.1139 47.4781,46.4033 47.6458,46.7715L 50.9225,54.2329 Z " Stroke="{DynamicResource DarkGrey}"/>
</Canvas>
<Canvas x:Key="alarm_icon" x:Shared="False" x:Name="alarm_icon" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="34.8333" Height="34.8333" Canvas.Left="20.5833" Canvas.Top="20.5833" Stretch="Fill" Fill="{DynamicResource Yellow}" Data="F1 M 38,23.75C 46.7445,23.75 53.8333,30.8388 53.8333,39.5833C 53.8333,48.3278 46.7445,55.4167 38,55.4167C 29.2555,55.4167 22.1667,48.3278 22.1667,39.5833C 22.1667,30.8388 29.2555,23.75 38,23.75 Z M 38,27.7083C 31.4416,27.7083 26.125,33.025 26.125,39.5833C 26.125,46.1417 31.4416,51.4583 38,51.4583C 44.5584,51.4583 49.875,46.1417 49.875,39.5833C 49.875,33.025 44.5584,27.7083 38,27.7083 Z M 37.6042,30.875C 38.4786,30.875 39.1875,31.5839 39.1875,32.4583L 39.1875,38.3959L 45.125,38.3959C 45.9994,38.3959 46.7083,39.1047 46.7083,39.9792L 46.7083,40.7708C 46.7083,41.6453 45.9994,42.3542 45.125,42.3542L 38,42.3542C 37.2083,42.2222 36.4167,42.0903 35.9548,41.6285C 35.493,41.1667 35.3611,40.375 35.2292,39.5833L 35.2292,32.4583C 35.2292,31.5839 35.938,30.875 36.8125,30.875L 37.6042,30.875 Z M 49.0833,20.5833C 52.5811,20.5833 55.4167,23.4189 55.4167,26.9167C 55.4167,28.4256 54.889,29.8113 54.008,30.8993C 51.9429,27.1006 48.5651,24.1189 44.4835,22.5632C 45.6379,21.3439 47.2718,20.5833 49.0833,20.5833 Z M 26.9167,20.5834C 28.7282,20.5834 30.3621,21.3439 31.5165,22.5632C 27.4349,24.1189 24.0571,27.1006 21.992,30.8993C 21.111,29.8113 20.5833,28.4256 20.5833,26.9167C 20.5833,23.4189 23.4189,20.5834 26.9167,20.5834 Z "/>
</Canvas>
<Canvas x:Key="action_sipcall_icon" x:Shared="False" x:Name="action_sipcall_icon" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="26.1886" Height="41.1667" Canvas.Left="24.9057" Canvas.Top="17.4167" Stretch="Fill" Fill="#FFEFF4FF" Data="F1 M 50.9225,54.2329C 51.037,54.5029 51.0943,54.7769 51.0943,55.0551C 51.0943,55.4396 50.992,55.7986 50.7875,56.132C 50.583,56.4654 50.2966,56.72 49.9285,56.8959L 48.1981,57.7059C 47.5231,58.0127 46.8471,58.2356 46.1701,58.3747C 45.4931,58.5138 44.809,58.5833 44.1176,58.5833C 43.005,58.5833 41.9056,58.3982 40.8195,58.028C 39.7334,57.6578 38.6944,57.1281 37.7024,56.4388C 36.7104,55.7495 35.7798,54.916 34.9105,53.9384C 34.0412,52.9607 33.263,51.8705 32.5757,50.6678C 32.138,50.0011 31.6778,49.2402 31.1951,48.3852C 30.7861,47.6571 30.3187,46.7848 29.7931,45.7682C 29.2674,44.7517 28.7366,43.6237 28.2008,42.3842C 27.6526,41.1447 27.218,40.0617 26.8968,39.1352C 26.5757,38.2086 26.3272,37.4386 26.1513,36.825C 25.9468,36.1091 25.8057,35.4955 25.7279,34.9841C 25.4457,34.0351 25.2381,33.0912 25.1051,32.1524C 24.9722,31.2136 24.9057,30.2839 24.9057,29.3635C 24.9057,28.1609 25.0264,27.0032 25.2677,25.8905C 25.5091,24.7779 25.8793,23.7429 26.3783,22.7857C 26.8774,21.8285 27.5104,20.9725 28.2775,20.2178C 29.0445,19.463 29.9516,18.8484 30.9988,18.3739L 32.7046,17.5885C 32.9746,17.4739 33.2446,17.4167 33.5146,17.4167C 33.895,17.4167 34.2488,17.522 34.5761,17.7327C 34.9033,17.9433 35.1488,18.2348 35.3124,18.6071L 38.5952,26.0623C 38.7097,26.3323 38.767,26.6023 38.767,26.8723C 38.767,27.2691 38.6647,27.6362 38.4602,27.9737C 38.2557,28.3112 37.9673,28.5638 37.595,28.7319L 34.2202,30.2839C 33.7743,30.4885 33.4327,30.7891 33.1955,31.1859C 32.9582,31.5827 32.8396,32.0102 32.8396,32.4684C 32.8396,32.8161 32.905,33.1433 33.0359,33.4501L 38.5768,46.1026C 38.7936,46.5894 39.0932,46.9474 39.4757,47.1764C 39.8582,47.4055 40.2744,47.5201 40.7244,47.5201C 41.0312,47.5201 41.3441,47.4505 41.6632,47.3114L 45.038,45.759C 45.3039,45.6445 45.5719,45.5872 45.8419,45.5872C 46.2141,45.5872 46.5659,45.6925 46.8973,45.9032C 47.2286,46.1139 47.4781,46.4033 47.6458,46.7715L 50.9225,54.2329 Z "/>
<TextBlock Height="24.074" Canvas.Left="42.638" TextWrapping="Wrap" Width="28.92" Foreground="#FFEFF4FF" Canvas.Top="18.593" RenderTransformOrigin="0.5,0.5" FontSize="18.667" FontFamily="Calibri">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-24.887"/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform><Run Language="nl-nl" Text="SIP"/></TextBlock>
</Canvas>
<Canvas x:Key="action_sipcall_icon_focus" x:Shared="False" x:Name="sipcall_icon_focus" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="26.1886" Height="41.1667" Canvas.Left="24.9057" Canvas.Top="17.4167" Stretch="Fill" Fill="{DynamicResource Yellow}" Data="F1 M 50.9225,54.2329C 51.037,54.5029 51.0943,54.7769 51.0943,55.0551C 51.0943,55.4396 50.992,55.7986 50.7875,56.132C 50.583,56.4654 50.2966,56.72 49.9285,56.8959L 48.1981,57.7059C 47.5231,58.0127 46.8471,58.2356 46.1701,58.3747C 45.4931,58.5138 44.809,58.5833 44.1176,58.5833C 43.005,58.5833 41.9056,58.3982 40.8195,58.028C 39.7334,57.6578 38.6944,57.1281 37.7024,56.4388C 36.7104,55.7495 35.7798,54.916 34.9105,53.9384C 34.0412,52.9607 33.263,51.8705 32.5757,50.6678C 32.138,50.0011 31.6778,49.2402 31.1951,48.3852C 30.7861,47.6571 30.3187,46.7848 29.7931,45.7682C 29.2674,44.7517 28.7366,43.6237 28.2008,42.3842C 27.6526,41.1447 27.218,40.0617 26.8968,39.1352C 26.5757,38.2086 26.3272,37.4386 26.1513,36.825C 25.9468,36.1091 25.8057,35.4955 25.7279,34.9841C 25.4457,34.0351 25.2381,33.0912 25.1051,32.1524C 24.9722,31.2136 24.9057,30.2839 24.9057,29.3635C 24.9057,28.1609 25.0264,27.0032 25.2677,25.8905C 25.5091,24.7779 25.8793,23.7429 26.3783,22.7857C 26.8774,21.8285 27.5104,20.9725 28.2775,20.2178C 29.0445,19.463 29.9516,18.8484 30.9988,18.3739L 32.7046,17.5885C 32.9746,17.4739 33.2446,17.4167 33.5146,17.4167C 33.895,17.4167 34.2488,17.522 34.5761,17.7327C 34.9033,17.9433 35.1488,18.2348 35.3124,18.6071L 38.5952,26.0623C 38.7097,26.3323 38.767,26.6023 38.767,26.8723C 38.767,27.2691 38.6647,27.6362 38.4602,27.9737C 38.2557,28.3112 37.9673,28.5638 37.595,28.7319L 34.2202,30.2839C 33.7743,30.4885 33.4327,30.7891 33.1955,31.1859C 32.9582,31.5827 32.8396,32.0102 32.8396,32.4684C 32.8396,32.8161 32.905,33.1433 33.0359,33.4501L 38.5768,46.1026C 38.7936,46.5894 39.0932,46.9474 39.4757,47.1764C 39.8582,47.4055 40.2744,47.5201 40.7244,47.5201C 41.0312,47.5201 41.3441,47.4505 41.6632,47.3114L 45.038,45.759C 45.3039,45.6445 45.5719,45.5872 45.8419,45.5872C 46.2141,45.5872 46.5659,45.6925 46.8973,45.9032C 47.2286,46.1139 47.4781,46.4033 47.6458,46.7715L 50.9225,54.2329 Z " Stroke="{DynamicResource DarkGrey}"/>
<TextBlock Height="62.373" Canvas.Left="48.997" TextWrapping="Wrap" Width="65.536" Foreground="{DynamicResource Yellow}" Canvas.Top="9.11" RenderTransformOrigin="0.5,0.5" FontSize="18.667" FontFamily="Calibri">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-24.887"/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform><Run Language="nl-nl" Text="SIP"/></TextBlock>
</Canvas>
<Canvas x:Key="action_call_icon" x:Shared="False" x:Name="action_call_icon" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="26.1886" Height="41.1667" Canvas.Left="24.9057" Canvas.Top="17.4167" Stretch="Fill" Fill="{DynamicResource VeryLightBlue}" Data="F1 M 50.9225,54.2329C 51.037,54.5029 51.0943,54.7769 51.0943,55.0551C 51.0943,55.4396 50.992,55.7986 50.7875,56.132C 50.583,56.4654 50.2966,56.72 49.9285,56.8959L 48.1981,57.7059C 47.5231,58.0127 46.8471,58.2356 46.1701,58.3747C 45.4931,58.5138 44.809,58.5833 44.1176,58.5833C 43.005,58.5833 41.9056,58.3982 40.8195,58.028C 39.7334,57.6578 38.6944,57.1281 37.7024,56.4388C 36.7104,55.7495 35.7798,54.916 34.9105,53.9384C 34.0412,52.9607 33.263,51.8705 32.5757,50.6678C 32.138,50.0011 31.6778,49.2402 31.1951,48.3852C 30.7861,47.6571 30.3187,46.7848 29.7931,45.7682C 29.2674,44.7517 28.7366,43.6237 28.2008,42.3842C 27.6526,41.1447 27.218,40.0617 26.8968,39.1352C 26.5757,38.2086 26.3272,37.4386 26.1513,36.825C 25.9468,36.1091 25.8057,35.4955 25.7279,34.9841C 25.4457,34.0351 25.2381,33.0912 25.1051,32.1524C 24.9722,31.2136 24.9057,30.2839 24.9057,29.3635C 24.9057,28.1609 25.0264,27.0032 25.2677,25.8905C 25.5091,24.7779 25.8793,23.7429 26.3783,22.7857C 26.8774,21.8285 27.5104,20.9725 28.2775,20.2178C 29.0445,19.463 29.9516,18.8484 30.9988,18.3739L 32.7046,17.5885C 32.9746,17.4739 33.2446,17.4167 33.5146,17.4167C 33.895,17.4167 34.2488,17.522 34.5761,17.7327C 34.9033,17.9433 35.1488,18.2348 35.3124,18.6071L 38.5952,26.0623C 38.7097,26.3323 38.767,26.6023 38.767,26.8723C 38.767,27.2691 38.6647,27.6362 38.4602,27.9737C 38.2557,28.3112 37.9673,28.5638 37.595,28.7319L 34.2202,30.2839C 33.7743,30.4885 33.4327,30.7891 33.1955,31.1859C 32.9582,31.5827 32.8396,32.0102 32.8396,32.4684C 32.8396,32.8161 32.905,33.1433 33.0359,33.4501L 38.5768,46.1026C 38.7936,46.5894 39.0932,46.9474 39.4757,47.1764C 39.8582,47.4055 40.2744,47.5201 40.7244,47.5201C 41.0312,47.5201 41.3441,47.4505 41.6632,47.3114L 45.038,45.759C 45.3039,45.6445 45.5719,45.5872 45.8419,45.5872C 46.2141,45.5872 46.5659,45.6925 46.8973,45.9032C 47.2286,46.1139 47.4781,46.4033 47.6458,46.7715L 50.9225,54.2329 Z "/>
</Canvas>
<Canvas x:Key="action_call_icon_focus" x:Shared="False" x:Name="action_call_icon_focus" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="26.1886" Height="41.1667" Canvas.Left="24.9057" Canvas.Top="17.4167" Stretch="Fill" Fill="{DynamicResource Green}" Data="F1 M 50.9225,54.2329C 51.037,54.5029 51.0943,54.7769 51.0943,55.0551C 51.0943,55.4396 50.992,55.7986 50.7875,56.132C 50.583,56.4654 50.2966,56.72 49.9285,56.8959L 48.1981,57.7059C 47.5231,58.0127 46.8471,58.2356 46.1701,58.3747C 45.4931,58.5138 44.809,58.5833 44.1176,58.5833C 43.005,58.5833 41.9056,58.3982 40.8195,58.028C 39.7334,57.6578 38.6944,57.1281 37.7024,56.4388C 36.7104,55.7495 35.7798,54.916 34.9105,53.9384C 34.0412,52.9607 33.263,51.8705 32.5757,50.6678C 32.138,50.0011 31.6778,49.2402 31.1951,48.3852C 30.7861,47.6571 30.3187,46.7848 29.7931,45.7682C 29.2674,44.7517 28.7366,43.6237 28.2008,42.3842C 27.6526,41.1447 27.218,40.0617 26.8968,39.1352C 26.5757,38.2086 26.3272,37.4386 26.1513,36.825C 25.9468,36.1091 25.8057,35.4955 25.7279,34.9841C 25.4457,34.0351 25.2381,33.0912 25.1051,32.1524C 24.9722,31.2136 24.9057,30.2839 24.9057,29.3635C 24.9057,28.1609 25.0264,27.0032 25.2677,25.8905C 25.5091,24.7779 25.8793,23.7429 26.3783,22.7857C 26.8774,21.8285 27.5104,20.9725 28.2775,20.2178C 29.0445,19.463 29.9516,18.8484 30.9988,18.3739L 32.7046,17.5885C 32.9746,17.4739 33.2446,17.4167 33.5146,17.4167C 33.895,17.4167 34.2488,17.522 34.5761,17.7327C 34.9033,17.9433 35.1488,18.2348 35.3124,18.6071L 38.5952,26.0623C 38.7097,26.3323 38.767,26.6023 38.767,26.8723C 38.767,27.2691 38.6647,27.6362 38.4602,27.9737C 38.2557,28.3112 37.9673,28.5638 37.595,28.7319L 34.2202,30.2839C 33.7743,30.4885 33.4327,30.7891 33.1955,31.1859C 32.9582,31.5827 32.8396,32.0102 32.8396,32.4684C 32.8396,32.8161 32.905,33.1433 33.0359,33.4501L 38.5768,46.1026C 38.7936,46.5894 39.0932,46.9474 39.4757,47.1764C 39.8582,47.4055 40.2744,47.5201 40.7244,47.5201C 41.0312,47.5201 41.3441,47.4505 41.6632,47.3114L 45.038,45.759C 45.3039,45.6445 45.5719,45.5872 45.8419,45.5872C 46.2141,45.5872 46.5659,45.6925 46.8973,45.9032C 47.2286,46.1139 47.4781,46.4033 47.6458,46.7715L 50.9225,54.2329 Z " Stroke="{DynamicResource DarkGrey}"/>
</Canvas>
<Canvas x:Key="action_chat" x:Shared="False" x:Name="action_chat" Width="76.0106" Height="76.0106" Clip="F1 M 0,0L 76.0106,0L 76.0106,76.0106L 0,76.0106L 0,0">
<Path Width="38.0053" Height="38.0053" Canvas.Left="19.0026" Canvas.Top="19.0027" Stretch="Fill" Fill="{DynamicResource VeryLightBlue}" Data="F1 M 40.3806,19.0027C 49.5637,19.0027 57.008,23.611 57.008,29.2958C 57.008,32.9008 54.0141,36.073 49.4815,37.9115C 50.4478,39.7772 52.1442,41.8291 53.8406,44.4135C 50.3128,43.1826 45.0382,41.9924 41.9082,39.546L 40.3806,39.5889C 31.1976,39.5889 23.7533,34.9805 23.7533,29.2958C 23.7533,23.611 31.1976,19.0027 40.3806,19.0027 Z M 44.3395,43.5477C 44.3395,48.3579 38.6677,52.2573 31.6711,52.2573L 30.7082,52.2325C 28.1329,54.6161 24.5589,57.008 20.5862,57.008C 21.5113,55.1577 23.5174,53.3075 24.7099,50.8257C 21.2717,49.2683 19.0026,46.5902 19.0026,43.5477C 19.0026,40.5065 21.27,37.8293 24.706,36.2715C 27.6472,39.1709 32.8586,41.0982 38.7973,41.0982L 40.3249,41.0553C 41.4454,41.9312 42.8409,42.646 44.3327,43.2594L 44.3395,43.5477 Z "/>
</Canvas>
<Canvas x:Key="action_chat_focus" x:Shared="False" x:Name="action_chat_focus" Width="76.0106" Height="76.0106" Clip="F1 M 0,0L 76.0106,0L 76.0106,76.0106L 0,76.0106L 0,0">
<Path Width="38.0053" Height="38.0053" Canvas.Left="19.0026" Canvas.Top="19.0027" Stretch="Fill" Fill="{DynamicResource Orange}" Data="F1 M 40.3806,19.0027C 49.5637,19.0027 57.008,23.611 57.008,29.2958C 57.008,32.9008 54.0141,36.073 49.4815,37.9115C 50.4478,39.7772 52.1442,41.8291 53.8406,44.4135C 50.3128,43.1826 45.0382,41.9924 41.9082,39.546L 40.3806,39.5889C 31.1976,39.5889 23.7533,34.9805 23.7533,29.2958C 23.7533,23.611 31.1976,19.0027 40.3806,19.0027 Z M 44.3395,43.5477C 44.3395,48.3579 38.6677,52.2573 31.6711,52.2573L 30.7082,52.2325C 28.1329,54.6161 24.5589,57.008 20.5862,57.008C 21.5113,55.1577 23.5174,53.3075 24.7099,50.8257C 21.2717,49.2683 19.0026,46.5902 19.0026,43.5477C 19.0026,40.5065 21.27,37.8293 24.706,36.2715C 27.6472,39.1709 32.8586,41.0982 38.7973,41.0982L 40.3249,41.0553C 41.4454,41.9312 42.8409,42.646 44.3327,43.2594L 44.3395,43.5477 Z "/>
</Canvas>
<Canvas x:Key="action_message" x:Shared="False" x:Name="action_message" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="38" Height="39.75" Canvas.Left="19" Canvas.Top="22" Stretch="Fill" Fill="{DynamicResource VeryLightBlue}" Data="F1 M 33,51L 36.4167,61.75L 24,51L 19,51L 19,22L 57,22L 57,51L 33,51 Z "/>
</Canvas>
<Canvas x:Key="action_message_focus" x:Shared="False" x:Name="action_message_focus" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="38" Height="39.75" Canvas.Left="19" Canvas.Top="22" Stretch="Fill" Fill="{DynamicResource Blue}" Data="F1 M 33,51L 36.4167,61.75L 24,51L 19,51L 19,22L 57,22L 57,51L 33,51 Z "/>
</Canvas>
<SolidColorBrush x:Key="Orange" Color="#FFF5610E"/>
<SolidColorBrush x:Key="Red" Color="#FFE51400"/>
<SolidColorBrush x:Key="Blue" Color="#FF1BA1E2"/>
<SolidColorBrush x:Key="Yellow" Color="#FFFFC40D"/>
<SolidColorBrush x:Key="Green" Color="#FF00A300"/>
<SolidColorBrush x:Key="DarkGrey" Color="#FF2F2F2F"/>
<SolidColorBrush x:Key="VeryLightBlue" Color="#FFEFF4FF"/>
<SolidColorBrush x:Key="LightGrey" Color="#FF3B3B3B"/>
</Application.Resources>
Well I can't test your actual code because of all the missing Resources, but here are some suggestions that may or may not help:
Set a little Padding on the animated TextBlock.
Set the Background property of the animated TextBlock to Transparent.
Set the SnapsToDevicePixels property of the animated TextBlock to True.
You could also try using a TextBox control, but Style it to look like a TextBlock:
<Style x:Key="TextBlockStyle" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="TextWrapping" Value="Wrap" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
UPDATE >>>
Ok, so I've added your code to a new WPF application and I'm afraid to tell you that I have no visual problem like you:
Mind you, I don't have your view model/DataContext... I just typed that message into the TextBlock.Text property.
I think you might benefit from simplifying your xaml, there seems to be a lot going on which will just make it very complicated to find out what's happening.
It looks like you have many panels that aren't providing you with much benefit, for example the WrapPanels (which is designed to wrap a list of items) that contain only a single child control, the ViewBoxes which are a fixed size (so they will simply be scaling your icon) and also the Canvas wrapping your text block which is always at the top left.
You've currently got
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions ... 3 columns/>
<StackPanel x:Name="UserCallAlarmPanel" >
<WrapPanel Name="CallPanel" >
<Viewbox>
<ContentControl Content="{DynamicResource calls_icon}"/>
</Viewbox>
</WrapPanel>
<WrapPanel Name="AlarmPanel">
<Viewbox>
<ContentControl Content="{DynamicResource alarm_icon}"/>
</Viewbox>
</WrapPanel>
</StackPanel>
<StackPanel x:Name="UserContainer" Grid.Column="1">
<TextBlock x:Name="NameLabel" Text="{Binding Name}"/>
<Canvas Name="UserStatusLabelContainer">
<TextBlock x:Name="UserStatusLabel" Text="{Binding UserStatus}" />
</Canvas>
</StackPanel>
<WrapPanel Name="StatusIconContainer" Grid.Column="2" >
<Viewbox x:Name="StatusIconViewbox">
<ContentControl x:Name="StatusIcon" Content="{Binding Status}"/>
</Viewbox>
</WrapPanel>
</Grid>
which I think you can go as far as simplifying to
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions .... 3 columns/>
<Grid.RowDefinitions ... 2 rows Heights fixed to 25/>
<ContentControl Grid.Column="0" Grid.Row="0"
Content="{DynamicResource calls_icon}"/>
<ContentControl Grid.Column="0" Grid.Row="1"
Content="{DynamicResource alarm_icon}"/>
<TextBlock Grid.Column="1" Grid.Row="0"
x:Name="NameLabel" Text="{Binding Name}"/>
<TextBlock Grid.Column="1" Grid.Row="1"
x:Name="UserStatusLabel" Text="{Binding UserStatus}" />
<ContentControl Grid.Column="2" Grid.Row="0" Grid.RowSpan="2"
x:Name="StatusIcon" Content="{Binding Status}"/>
</Grid>
You can then apply your MouseOvers to the ContentControls and TextBlocks, and shouldn't lose any other functionality, unless you need to rescale your icons.
Related
WPF Dynamically add buttons with different multiple text
I create a template for buttons:
<Style x:Key="TableButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="Margin" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" ClipToBounds="True">
<!-- Inner Rectangle with rounded corners. -->
<Rectangle x:Name="innerRectangle"
Stroke="Transparent"
StrokeThickness="20"
Fill="{TemplateBinding Background}"
RadiusX="20" RadiusY="20" />
<Ellipse x:Name="NumberGuests"
Width="25"
Height="25"
Stretch="Fill"
StrokeLineJoin="Round"
Fill="Red"
Margin="-70,-70,0,0"/>
<Ellipse x:Name="NumberChecks"
Width="25"
Height="25"
Stretch="Fill"
StrokeLineJoin="Round"
Fill="Green"
Margin="70,-70,0,0"/>
<Rectangle x:Name="Time"
Width="70"
Height="25"
Fill="White"
RadiusX="10" RadiusY="10"
Margin="0,50,0,0"/>
<TextBlock x:Name='TableID'
FontSize="12"
HorizontalAlignment="Center"
FontWeight="Bold"
Margin="0,25,0,0"
Text="Table_New"/>
<TextBlock x:Name='TimeID'
FontSize="12"
HorizontalAlignment="Center"
Margin="0,65,0,0"
Text="Time_New" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
Private Sub CreateButton_Click(sender As Object, e As RoutedEventArgs)
Dim TableName As String
Dim TimeNotAvailable As String
LayoutGrid.AllowDragging = True
ToggleButton.Content = "Edit"
Dim LocationButton As New Button
Dim style As Style = TryCast(Me.FindResource("TableButtonStyle"), Style)
TableName = "Test" & I
TimeNotAvailable = "Time" & I
I += 1
LocationButton.Style = style
TableID.Content = TableName
TimeID.Content = TimeNotAvailable
LayoutGrid.Children.Add(LocationButton)
AddHandler LocationButton.Click, AddressOf LocationButtonClicked
End Sub
Every time a "Create Button" button is pressed, a button will be generated based on the template.
However I am not able to set the textblock.text TableID and TimeID.
When creating the buttons I need the tableID and TimeID to get the value of a variable. Like "Table 1", "Table 2" etc.
I tried all different type of bindings, resources etc but binding would change the text in all buttons, first button text would be "Table 1" but when generating the second both buttons would be "Table 2". I also tried DataContext but the both textblocks would have the same data.
I tried creating a button directly in xaml and "TableID.Content = TableName" worked but when using the template "TableID" is not recognized.
Please some assistance. Thanks
As a quick solution you can try this workaround
Add binding to the Text property as follows
<TextBlock x:Name='TableID'
FontSize="12"
HorizontalAlignment="Center"
FontWeight="Bold"
Margin="0,25,0,0"
Text="{Binding [0], FallbackValue=Table_New}"/>
<TextBlock x:Name='TimeID'
FontSize="12"
HorizontalAlignment="Center"
Margin="0,65,0,0"
Text="{Binding [1], FallbackValue=Time_New}" />
and replace following
TableID.Content = TableName
TimeID.Content = TimeNotAvailable
with
LocationButton.DataContext = { TableName, TimeNotAvailable }
The above example demonstrates MVVM way of displaying data on the UI.
Explanation
{ TableName, TimeNotAvailable } creates and an implicit array which passed as DataContext to the button then it is used in binding with indexers where [0] is first element and [1] being the second.
Vector icon as button content inside style not display in design time
I want to use vector icon as content inside Button style to use in multiple buttons (more than 20). So, I did like this:
my icon:
<Rectangle x:Key="DefaultsIcon" Height="20" Width="20" x:Shared="False" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{DynamicResource BlackBrush}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="29.26" Height="32.5111" Canvas.Left="24.9269" Canvas.Top="21.3222" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 24.9269,53.8333L 24.9269,21.3222L 36.6106,21.3222C 48.3282,21.3222 54.1869,26.6053 54.1869,37.1714C 54.1869,42.2319 52.588,46.274 49.3901,49.2977C 46.1922,52.3215 41.9324,53.8333 36.6106,53.8333L 24.9269,53.8333 Z M 32.3581,27.36L 32.3581,47.7956L 36.0156,47.7956C 39.2231,47.7956 41.7377,46.8509 43.5591,44.9617C 45.3806,43.0725 46.2914,40.5023 46.2914,37.2512C 46.2914,34.1791 45.3879,31.7625 43.5809,30.0015C 41.7739,28.2405 39.2376,27.36 35.972,27.36L 32.3581,27.36 Z "/>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
my style:
<Style TargetType="Button" BasedOn="{StaticResource CameraButtonBaseStyle}" x:Key="CameraDefaultsButtonStyle">
<Setter Property="Margin" Value="{Binding Source={StaticResource CameraUISettings}, Path=OptionLBMargin, Mode=OneWay, Converter={uiConverters:DoubleToLeftMarginConverter}}"></Setter>
<Setter Property="ToolTip" Value="{Binding Source={StaticResource CameraLocalization}, Path=ToolTips.Default, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"></Setter>
<Setter Property="Content" Value="{DynamicResource DefaultsIcon}"></Setter>
</Style>
and apply style:
<Button Style="{StaticResource CameraDefaultsButtonStyle}"
Click="LoadDefaultX_OnClick">
</Button>
But the problem here is that in design time only 1 icon of all displaying and in runtime all icons displaying good. I want that in design time icons also were visible.
How to reach this?
The problem is DefaultsIcon style contains a visual. The style is created only once per lifetime of your app and reused as often as needed. But a visual can only be used once in the visual tree. A quick fix is to add x:Shared="Falsed" to DefaultsIcon. From the architectural perspective that's not the best solution because now for every usage of DefaultsIcon a new instance is created.
Because I want to share some code I add a new answer. My question is do you need the DefaultsIcon style somewhere else? If not you could do the following to get the same result: <Style TargetType="Button" x:Key="CameraDefaultsButtonStyle" x:Shared="False" > <Setter Property="Margin" Value="10"></Setter> <Setter Property="ToolTip" Value="hello"></Setter> <Setter Property="Content"> <Setter.Value> <Path Width="29.26" Height="32.5111" Canvas.Left="24.9269" Canvas.Top="21.3222" Stretch="Fill" Fill="Black" Data="F1 M 24.9269,53.8333L 24.9269,21.3222L 36.6106,21.3222C 48.3282,21.3222 54.1869,26.6053 54.1869,37.1714C 54.1869,42.2319 52.588,46.274 49.3901,49.2977C 46.1922,52.3215 41.9324,53.8333 36.6106,53.8333L 24.9269,53.8333 Z M 32.3581,27.36L 32.3581,47.7956L 36.0156,47.7956C 39.2231,47.7956 41.7377,46.8509 43.5591,44.9617C 45.3806,43.0725 46.2914,40.5023 46.2914,37.2512C 46.2914,34.1791 45.3879,31.7625 43.5809,30.0015C 41.7739,28.2405 39.2376,27.36 35.972,27.36L 32.3581,27.36 Z "/> </Setter.Value> </Setter> </Style> The need to set x:Shared="False" is for me a sign to think of a small user control instead of a style.
No, I mean a mini user control as a replacement for your CameraDefaultsButtonStyle style, not only the Content within that style. The control could look like this:
<Button x:Class="TabControl1.CameraDefaultsButton"
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="300" d:DesignWidth="300"
ToolTip="Hello">
<Grid>
<Path Width="29.26" Height="32.5111" Stretch="Fill" Fill="Black" Data="F1 M 24.9269,53.8333L 24.9269,21.3222L 36.6106,21.3222C 48.3282,21.3222 54.1869,26.6053 54.1869,37.1714C 54.1869,42.2319 52.588,46.274 49.3901,49.2977C 46.1922,52.3215 41.9324,53.8333 36.6106,53.8333L 24.9269,53.8333 Z M 32.3581,27.36L 32.3581,47.7956L 36.0156,47.7956C 39.2231,47.7956 41.7377,46.8509 43.5591,44.9617C 45.3806,43.0725 46.2914,40.5023 46.2914,37.2512C 46.2914,34.1791 45.3879,31.7625 43.5809,30.0015C 41.7739,28.2405 39.2376,27.36 35.972,27.36L 32.3581,27.36 Z "/>
</Grid>
</Button>
using System.Windows.Controls;
namespace TabControl1
{
/// <summary>
/// Interaction logic for CameraDefaultsButton.xaml
/// </summary>
public partial class CameraDefaultsButton : Button
{
public CameraDefaultsButton ()
{
InitializeComponent ();
}
}
}
You use it this way like the standard button:
<Window x:Class="TabControl1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:TabControl1"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:CameraDefaultsButton Margin="301,164,0,0"
HorizontalAlignment="Left"
Width="139"
Height="55"
VerticalAlignment="Top"/>
<local:CameraDefaultsButton Margin="301,236,0,0"
HorizontalAlignment="Left"
Width="139"
Height="55"
VerticalAlignment="Top"/>
</Grid>
</Window>
but don't forget to add the namespace where you use it:
xmlns:local="clr-namespace:TabControl1"
Tooltip Placement - WPF
I'm trying to put together a tool tip for a simple button. However when the mouse is hovered over the button, the tool tip does not appear below it.
Please see this :
This xaml is as below:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<Page.Resources>
<Style x:Key="ToolTipStyle" TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Grid x:Name="PopupGrid">
<Grid x:Name="ShadowBackground" Height="65" Width="260">
<Grid.Effect>
<DropShadowEffect BlurRadius="7" ShadowDepth="1" Opacity="0.5" />
</Grid.Effect>
<Path Margin="0 0 50 0" Width="20" Height="10" HorizontalAlignment="Right" VerticalAlignment="Top" Data="M0,10 L10,0 20,10Z" Stroke="Gray" Fill="#EFEFF0" Stretch="None" />
<Border BorderThickness="1 0 1 1" CornerRadius="3" Margin="10 9 10 10" BorderBrush="Gray" Background="#EFEFF0">
<ContentPresenter/>
</Border>
<Border BorderThickness="0 1 0 0" CornerRadius="0 0 3 0" Margin="0 9 10 0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="41" Height="10" BorderBrush="Gray" />
<Border BorderThickness="0 1 0 0" CornerRadius="3 0 0 0" Margin="10 9 69 0" VerticalAlignment="Top" Height="10" BorderBrush="Gray" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToolTipHeaderStyle" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="14"/>
</Style>
<Style x:Key="ToolTipTextStyle" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontSize" Value="12"/>
</Style>
</Page.Resources>
<Grid x:Name="PopupGrid" Background="Red">
<Button Width="100" Height="30" Content="Click Me!">
<Button.ToolTip>
<ToolTip Style="{StaticResource ToolTipStyle}">
<StackPanel Orientation="Vertical">
<Label Content="Newly Rejected" Style="{StaticResource ToolTipHeaderStyle}"></Label>
<Label Content="Please perform requested edits and resubmit" Style="{StaticResource ToolTipTextStyle}"></Label>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
</Grid>
</Page>
I'm not sure what is causing this behavior. Can you please help to get the placement correct?
Forgot to mention how it should appear:
the triangle of the tooltip should be places right below the mouse cursor, which would mean that the tooltip should move towards left.Something like this:
Thanks,
-Mike
Have you played around with the placement properties? You can add this to your ToolTipStyle: <Setter Property="ToolTipService.Placement" Value="Left" /> There's also ToolTipService.PlacementRectangle and ToolTipService.PlacementTarget EDIT: You could try: <Setter Property="ToolTipService.HorizontalOffset" Value="-200" />
Use the CustomPopupPlacementCallback.. In my case I needed the tip to display on the right of a textbox, Placement.Right worked fine on my laptop, but was displaying to the left on my touchscreen, the easiest way to fix this is to use the callback to calculate a relative offset in the code behind:
...
tip.PlacementTarget = this;
tip.Placement = PlacementMode.Custom;
tip.CustomPopupPlacementCallback = new CustomPopupPlacementCallback(PositionTooltip);
...
private CustomPopupPlacement[] PositionTooltip(Size popupSize, Size targetSize, Point offset)
{
double offsetY = targetSize.Height / 2 + popupSize.Height;
double offsetX = targetSize.Width;
return new CustomPopupPlacement[] { new CustomPopupPlacement(new Point(offsetX, offsetY), PopupPrimaryAxis.None) };
}
Vertical slider with labels on the ticker
I'm currently trying to get a custom vertical slider with a ticker as well as labels in those tickers with the corresponding values. I already found online some interesting code for a horizontal slider that I'm now using in my solution and goes as follows:
XAML:
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<local:MyTickBar Margin="5,0,10,0" x:Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Fill="{StaticResource GlyphDarkBrush}" Height="5" />
<Border Name="TrackBackground" Margin="0" CornerRadius="2" Height="4" Grid.Row="1" Background="{StaticResource GlyphLightBrush}" BorderBrush="{StaticResource ButtonNormal}" BorderThickness="1" />
<Track Grid.Row="1" Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TickBar Name="BottomTick" SnapsToDevicePixels="True" Grid.Row="2" Fill="Black" Placement="Bottom" Height="10" Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
With MyTickBar being a class defined as:
public class MyTickBar : TickBar
{
protected override void OnRender(DrawingContext dc)
{
Size size = new Size(base.ActualWidth, base.ActualHeight);
int tickCount = (int)((this.Maximum - this.Minimum) / this.TickFrequency) + 1;
if ((this.Maximum - this.Minimum) % this.TickFrequency == 0)
tickCount -= 1;
Double tickFrequencySize;
// Calculate tick's setting
tickFrequencySize = (size.Width * this.TickFrequency / (this.Maximum - this.Minimum));
string text = "";
FormattedText formattedText = null;
double num = this.Maximum - this.Minimum;
int i = 0;
// Draw each tick text
for (i = 0; i <= tickCount; i++)
{
text = Convert.ToString(Convert.ToInt32(this.Minimum + this.TickFrequency * i), 10);
formattedText = new FormattedText(text, CultureInfo.GetCultureInfo("en-us"), FlowDirection.LeftToRight, new Typeface("Verdana"), 16, Brushes.Black);
dc.DrawText(formattedText, new Point((tickFrequencySize * i), 30));
}
}
}
This works fine with a horizontal slider, but as I pretend a vertical one I tried 2 different solutions with no success. First, was to make a similar XAML for a vertical slider, but as I'm quite new to WPF, I couldn't achieve the intended solution (I basically changed the row and height properties to column and with, but is probably a bit more complex than that). And my second attempt was using a
<Slider.LayoutTransform>
<RotateTransform Angle="270"/>
</Slider.LayoutTransform>
on the pretended slider, getting a slider with the labels in the incorrect position, like the following image illustrates: http://s22.postimage.org/sophl10wh/Incorrect.jpg
I tried to apply a rotation to the DrawingContext of MyTicker but that rotates the entire ticker, instead of the labels with the values. So, my question is how can I obtain the pretend solution? Either through the necessary changes to a new XAML for a custom vertical slider, or just rotating the labels in the second solution.
So, I can now answer my own question and maybe help someone in the future who will try to acomplish the same. Like I said in the comment of my own question, just later I realized I could go to the msdn and get the proper vertical slider template instead of trying to adapt the horizontal one.
My current XAML is now:
<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<local:MyTickBarVertical Margin="0,0,0,10" x:Name="TopTick" SnapsToDevicePixels="True" Placement="Left" Fill="{StaticResource GlyphDarkBrush}" Width="4" />
<Track Grid.Column="1" Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton
Style="{StaticResource SliderButtonStyle}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Style="{StaticResource SliderButtonStyle}"
Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TickBar
Name="BottomTick"
SnapsToDevicePixels="True"
Grid.Column="2"
Fill="Black"
Placement="Right"
Width="4"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
and I had do make some small changes to my class, since now I'm using a proper vertical slider:
public class MyTickBarVertical : TickBar
{
protected override void OnRender(DrawingContext dc)
{
Size size = new Size(base.ActualWidth, base.ActualHeight);
int tickCount = (int)((this.Maximum - this.Minimum) / this.TickFrequency) + 1;
if ((this.Maximum - this.Minimum) % this.TickFrequency == 0)
tickCount -= 1;
Double tickFrequencySize;
// Calculate tick's setting
//width to height
tickFrequencySize = (size.Height * this.TickFrequency / (this.Maximum - this.Minimum));
string text = "";
FormattedText formattedText = null;
double num = this.Maximum - this.Minimum;
int i = 0;
// Draw each tick text
for (i = 0; i <= tickCount; i++)
{
text = Convert.ToString(Convert.ToInt32(this.Maximum) - Convert.ToInt32(this.Minimum + this.TickFrequency * i), 10);
formattedText = new FormattedText(text, CultureInfo.GetCultureInfo("en-us"), FlowDirection.RightToLeft, new Typeface("Verdana"), 16, Brushes.Black);
dc.DrawText(formattedText, new Point(0, (tickFrequencySize * i)));
}
}
}
getting now the following: http://s4.postimage.org/d0q6dpxvx/Correct.jpg
Cheers!
hide the default resize grip in wpf
I have a borderless and transparent window in WPF, with some fancy decoration at the bottom. There's a custom footer with some non conventional curves and what not showing the company logo. This window needs to be resizable with a grip in the bottom right corner like conventional windows. Anyways, I have put my own ResizeGrip in a place that is actually on the footer, however the default grip still shows up and it's floating in space due to the invisible window. How do I hide the default ResizeGrip?
The appearance of a resize grip is controlled via the ResizeMode dependency property on the Window. If this is set to CanResizeWithGrip: <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="50" Width="150" WindowStyle="None" AllowsTransparency="True" Background="#19FFFFFF" ResizeMode="CanResizeWithGrip"> <Grid></Grid> </Window> The Window will look like this: If it is set to CanResize (the default): <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="50" Width="150" WindowStyle="None" AllowsTransparency="True" Background="#19FFFFFF" ResizeMode="CanResize"> <Grid></Grid> </Window> The Window will look as follows:
So to hide the default grip, I overwrote the default ResizeGrip style such that it's visibility is hidden. Easy with the help of Expression Blend 2.
<Style TargetType="{x:Type ResizeGrip}">
<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ResizeGrip}">
<Grid SnapsToDevicePixels="True" Background="{TemplateBinding Background}">
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Visibility" Value="Hidden"/>
</Style>
Then I set up my own ResizeGrip on my custom window decoration with a style that is identical to the default grip style.
<SolidColorBrush x:Key="ResizeGripperForeground" Color="#B8B4A2"/>
<Style x:Key="VisibleResizeGrip" TargetType="{x:Type ResizeGrip}">
<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ResizeGrip}">
<Grid SnapsToDevicePixels="True" Background="{TemplateBinding Background}">
<Path Fill="White" HorizontalAlignment="Right" Margin="0,0,2,2" VerticalAlignment="Bottom" Data="M 8,0 L 10,0 L 10,2 L 8,2 Z M 4,4 L 6,4 L 6,6 L 4,6 Z M 8,4 L 10,4 L 10,6 L 8,6 Z M 0,8 L 2,8 L 2,10 L 0,10 Z M 4,8 L 6,8 L 6,10 L 4,10 Z M 8,8 L 10,8 L 10,10 L 8,10 Z"/>
<Path Fill="{StaticResource ResizeGripperForeground}" HorizontalAlignment="Right" Margin="0,0,3,3" VerticalAlignment="Bottom" Data="M 8,0 L 10,0 L 10,2 L 8,2 Z M 4,4 L 6,4 L 6,6 L 4,6 Z M 8,4 L 10,4 L 10,6 L 8,6 Z M 0,8 L 2,8 L 2,10 L 0,10 Z M 4,8 L 6,8 L 6,10 L 4,10 Z M 8,8 L 10,8 L 10,10 L 8,10 Z"/>
<Path Data="M8,0L10,0 10,2 8,2z M4,4L6,4 6,6 4,6z M8,4L10,4 10,6 8,6z M0,8L2,8 2,10 0,10z M4,8L6,8 6,10 4,10z M8,8L10,8 10,10 8,10z" Fill="White" HorizontalAlignment="Right" Margin="0,0,2,2" VerticalAlignment="Bottom" />
<Path Data="M8,0L10,0 10,2 8,2z M4,4L6,4 6,6 4,6z M8,4L10,4 10,6 8,6z M0,8L2,8 2,10 0,10z M4,8L6,8 6,10 4,10z M8,8L10,8 10,10 8,10z" Fill="{StaticResource ResizeGripperForeground}" HorizontalAlignment="Right" Margin="0,0,3,3" VerticalAlignment="Bottom" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>