I have added a Arrow to Indicate the TextBox from ToolTip. This Works great when the TextBox is far away from the Screen Edge. But When it is near the Screen edge. The ToolTip Placement changes and the Arrow is shown on Left.
Here is the Image
Correct as expected, since TextBox in away from edges.
But when TextBox is near to edges. I see this
I want to see the Arrow in the second image on the right side of tooltip.
Here is the code
<Grid Grid.Column="0" Width="10"
Margin="1,0,-1,0"
Background="Transparent">
<Path Height="15" Stretch="Fill"
Fill="{DynamicResource ControlsValidationBrush}"
Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
</Grid>
<Border Grid.Column="1"
Background="{DynamicResource ControlsValidationBrush}"
CornerRadius="0">
<TextBlock MaxWidth="250"
Margin="8,7,8,7"
Foreground="{DynamicResource WhiteBrush}"
Text="{Binding (Validation.Errors)[0].ErrorContent}"
TextWrapping="Wrap"
UseLayoutRounding="false" />
</Border>
I created the Controltemplate for the tooltip and show/hide right or left arrow depending on the placement of the tooltip. Here is the Xaml for it:
<ControlTemplate x:Key="tooltipTemplate" TargetType="{x:Type ToolTip}">
<StackPanel Orientation="Horizontal">
<Grid x:Name="LeftGrid"
Width="10"
Margin="1,0,-1,0"
Background="Transparent">
<Path Height="15" Stretch="Fill"
Fill="Red"
Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
</Grid>
<Border
Background="Red"
CornerRadius="0">
<TextBlock MaxWidth="250"
Margin="8,7,8,7"
Foreground="{DynamicResource WhiteBrush}"
Text="This is tooltip"
TextWrapping="Wrap"
UseLayoutRounding="false" />
</Border>
<Grid x:Name="RightGrid" Width="10"
Margin="1,0,-1,0"
Background="Transparent">
<Path Height="15" Stretch="Fill"
Fill="Red"
Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="Placement" Value="Left">
<Setter TargetName="LeftGrid" Property="Visibility" Value="Hidden"/>
<Setter TargetName="RightGrid" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="Placement" Value="Right">
<Setter TargetName="LeftGrid" Property="Visibility" Value="Visible"/>
<Setter TargetName="RightGrid" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ToolTip x:Key="myToolTip" Template="{StaticResource tooltipTemplate}">
Thanks
Related
I am trying to make a costume button in c# wpf. I used material design themes for inserting an icon inside the button but when I run the program, only the icon inside the button is click able not the whole button. what should I do to fix this?
I did this for button style:
<Application.Resources>
<Style x:Key="MyButton" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="border" BorderThickness="0" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="Opacity" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
here is the button:
<Button x:Name="btnClose" Style="{StaticResource MyButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Gray" Margin="10 0" Click="btnClose_Click">
<materialDesign:PackIcon Kind="Power" Height="30" Width="30"></materialDesign:PackIcon>
</Button>
Set the Background property to a Brush like for example Transparent instead of setting it to {x:Null}:
<Button x:Name="btnClose" Style="{StaticResource MyButton}" Width="30" Height="30" Padding="0"
Background="Transparent" BorderBrush="{x:Null}" Foreground="Gray" Margin="10 0" Click="btnClose_Click">
<materialDesign:PackIcon Kind="Power" Height="30" Width="30"></materialDesign:PackIcon>
</Button>
I was looking over internet for an arrow shaped button. I found this solution:
<Button HorizontalAlignment="Center" Click="Button_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<StackPanel Orientation="Horizontal">
<Rectangle Width="100" Height="25" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
<Polygon Points= "0,0 30,25, 0,50" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
</StackPanel>
<ContentPresenter HorizontalAlignment="Left" Margin="45,0,0,0" VerticalAlignment="Center" Content="Login"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
The problem with this is that, while this is a button that can be clicked, i "lost" the button click effect (i.e the effect that you have when you press the button). Do you know if there is a way to solve my problem?
You need to define this effect yourself in your custom template.
Add an IsPressed trigger that changes some properties of the elements in your template:
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<StackPanel Orientation="Horizontal">
<Rectangle x:Name="rect" Width="100" Height="25" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
<Polygon x:Name="pol" Points= "0,0 30,25, 0,50" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
</StackPanel>
<ContentPresenter HorizontalAlignment="Left" Margin="45,0,0,0" VerticalAlignment="Center" Content="Login"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="rect" Value="Red"/>
<Setter Property="Fill" TargetName="pol" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
I am wondering if its possible in WPF to make a Button style where you have a text, an image and text over the image (upon the image) with a color mark as illustrated on the picture below?
Until now i only got this
<Style TargetType="{x:Type Button}" x:Key="CatProBtn">
<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="Right" VerticalAlignment="Center"
/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="PreviewMouseDown">
<SoundPlayerAction Source="C:\Users\shaban\Downloads\Cash_register_beep_sound_.wav" />
</EventTrigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
<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>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Wheat"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
....
<Button
Style="{StaticResource CatProBtn}"
Margin="1,1,0,3"
Name="Shaban"
Height="Auto"
Width="Auto"
Grid.Row="1"
Grid.Column="1"
Click="Button_Click">
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
<TextBlock Text="Ispinde"></TextBlock>
<Image Source="C:\Users\shaban\Pictures\Picture5.png" Stretch="Uniform"></Image>
<TextBlock Text="Ispinde" HorizontalAlignment="Right"/>
</StackPanel>
</Button>
Inspire from code like this in your Button and modify the values to achieve your desired result.
Use a Grid to layout your content. Superimpose the price on the Image.
<Button MinHeight="50" HorizontalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Title" TextAlignment="Center"/>
<!-- This is where your image is in your code -->
<TextBlock Grid.Row="1" Text="Your
image
here..." FontSize="14" Background="Gray" TextAlignment="Center"/>
<TextBlock Grid.Row="2" Text="Description Description Description" TextAlignment="Center" TextWrapping="Wrap" FontSize="8" MaxWidth="100"/>
<!-- Superimpose price on top of image with some opacity -->
<TextBlock Grid.Row="1" Text="20,00 kr." Background="Yellow" Foreground="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,0,12" Opacity="0.6" FontSize="8"/>
</Grid>
</Button>
Result
You can overlay a Control over another Control by using Grids. It will be something like:
<Button>
<Grid>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
<TextBlock Text="Ispinde"/>
<Image Source="C:\Users\shaban\Pictures\Picture5.png"" Stretch="Uniform"/>
</StackPanel>
<Grid Width="100" Height="40" HorizontalAlignment="Right">
<Grid Background="Red" Opacity="0.6"/>
<TextBlock Foreground="White" Text="Overlay"/>
</Grid>
</Grid>
</Button>
I have ToggleButton with image inside. When the button is disabled I want half-transparent layer be shown over the button to indicate that the button is disabled.
I thought to use Canvas that will hold image and the rectangle that will be used as half-transparent layer. But that's what I get
Why the rectangle begins from the center of the button? Is there any other, better approach to do it?
<StackPanel>
<ToggleButton Name="MyButton" Height="39" Width="39">
<Canvas>
<Image />
<Rectangle Fill="Black" Width="39" Height="39" Opacity="0.5" >
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=MyButton,Path=IsEnabled}" Value="True">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=MyButton,Path=IsEnabled}" Value="False">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Canvas>
</ToggleButton>
</StackPanel>
Try defining a path to say where to draw the rectangle. Change values to fit in to your button.
eg:
<Path Data=" M0,0 L10,10 M0,10 L10,0" Stretch="Uniform" ></Path>
Try this
<ToggleButton Name="MyButton">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<ControlTemplate.Resources>
<BitmapImage x:Key="Image" UriSource="ImageRoation.png"></BitmapImage>
</ControlTemplate.Resources>
<Grid Height="39" Width="39" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Name="UpperRect" CornerRadius="3" Background="DimGray" Visibility="Hidden" RenderOptions.BitmapScalingMode="HighQuality" Opacity="0.5" BorderBrush="Black" BorderThickness="1" SnapsToDevicePixels="True" UseLayoutRounding="True" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2">
<Image Height="7" Width="7" Source="{StaticResource Image}" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="3,3,0,0"></Image>
</Border>
<Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="1" Grid.ColumnSpan="2" Background="DimGray" SnapsToDevicePixels="True"></Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="UpperRect" Property="Panel.ZIndex" Value="1"></Setter>
<Setter TargetName="UpperRect" Property="Visibility" Value="Visible"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="True">
<Setter TargetName="UpperRect" Property="Panel.ZIndex" Value="0"></Setter>
<Setter TargetName="UpperRect" Property="Visibility" Value="Hidden"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
I have TabControl and I have a plan to generate dynamicaly TabItems and fill up with ControlTemplate.
ControlTemplate:
<Window.Resources>
<ControlTemplate x:Key="Qtemp" TargetType="Control">
<ControlTemplate.Resources>
<ControlTemplate x:Key="yesButton" TargetType="{x:Type Button}">
<Grid>
<Image Visibility="Visible" Name="Normal" Source="/TabItemTemplate;component/Images/yes.png" />
<Image Visibility="Hidden" Name="Pressed" Source="/TabItemTemplate;component/Images/yes_p.png" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
<Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="noButton" TargetType="{x:Type Button}">
<Grid>
<Image Visibility="Visible" Name="Normal" Source="/TabItemTemplate;component/Images/no.png" />
<Image Visibility="Hidden" Name="Pressed" Source="/TabItemTemplate;component/Images/no_p.png" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
<Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="circleButton">
<Grid>
<Ellipse>
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" />
</Ellipse.Fill>
</Ellipse>
</Grid>
</ControlTemplate>
</ControlTemplate.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Ellipse Grid.Row="1" Margin="-1024,-75,0,0" Name="progress_bar" Fill="#FF01325E" Width="424" Height="424" StrokeThickness="0" RenderTransformOrigin=".5,.5">
<Ellipse.Clip>
<RectangleGeometry Rect="0,0,212,424"/>
</Ellipse.Clip>
<Ellipse.RenderTransform>
<RotateTransform Angle="45"/>
</Ellipse.RenderTransform>
</Ellipse>
<Grid Grid.RowSpan="3" Grid.Row="0" Width="Auto" Height="Auto" >
<Grid.Background>
<ImageBrush ImageSource="/TabItemTemplate;component/Images/Q_bg.png" />
</Grid.Background>
</Grid>
<TextBlock Grid.Row="1" Name="QBody" Width="400" Margin="-120,-100,0,0" Foreground="#FF333333" TextWrapping="Wrap" FontFamily="Arial" FontSize="28" TextAlignment="Left" FontWeight="Bold" VerticalAlignment="Center" Text="{Binding}" />
<StackPanel Grid.Row="1" Width="350" HorizontalAlignment="Right">
<Button Width="172" Height="172" Name="BT_yes" Template="{StaticResource yesButton}" Click="BT_NextQ" />
<Button Width="172" Height="172" Name="BT_no" Margin="0,20,0,0" Template="{StaticResource noButton}" Click="BT_NextQ" />
</StackPanel>
<Image Grid.Row="2" Source="/TabItemTemplate;component/Images/toolbar.png" />
<Button Grid.Row="2" Width="56" Height="56" Tag="/TabItemTemplate;component/Images/home.png" HorizontalAlignment="Left" Margin="90,0,0,15" Template="{StaticResource circleButton}" />
<Button Grid.Row="2" Width="56" Height="56" Tag="/TabItemTemplate;component/Images/back.png" HorizontalAlignment="Left" Margin="26,0,0,15" Template="{StaticResource circleButton}" />
</Grid>
</ControlTemplate>
</Window.Resources>
In XAML:
<TabControl HorizontalAlignment="Stretch" Name="navTab" VerticalAlignment="Stretch" BorderThickness="0" Padding="0">
<TabItem Name="tabItem1a" Header="static">
<Control Template="{StaticResource Qtemp}" />
</TabItem>
</TabControl>
CS file:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
for (int i = 1; i < 6; i++)
{
TabItem newTab = new TabItem();
Control newControl = new Control();
newControl.Template = (ControlTemplate)FindResource("Qtemp");
//TextBlock tb = (TextBlock)newControl.Template.FindName("Qbody", newControl);
//tb.Text = "TEST" + i.ToString();
newTab.Header = "Dynamic"+i.ToString();
newTab.Name = "Question" + i.ToString();
newTab.Content = newControl;
navTab.Items.Add(newTab);
}
}
In template I have TextBlock "Qbody" and Ellipse "progress_bar".
Im trying add text to "Qbody" and RorateTransform Angle for "progress_bar" but I cant get access to any controls in template.
I tried:
TextBlock tb = (TextBlock)newControl.Template.FindName("Qbody", newControl);
But it returns null.
Can anyone help me with it.
I dont know what im doing wrong.
Is any other way to set these two controls.
you have this marked as mvvm, but what you are doing violates mvvm principles. Your progress bar and textbox should be bound to your viewmodel, then you can access thier properties there.
Your controls are null because they have not been created yet.
But if you want to use code behind you need to access the controls in the apply template event of the framework element (Tab Control)
Framework ApplyTemplate Event
Cheers
EDIT 1:
You have to implement iNotifyPropertyChanged for the UI to be made "aware" of changes to the properties in the viewmodel. You would raise this event for every iteration of your property counter.
Also, the scope of what you need cannot be covered in one answer. I recommend reading more about MVVM and WPF and maybe use an existing framework to help like MVVM-Light or Caliburn.Micro.