Tererik's documentation is deplorable (or I can't find it). Anyway, anyone have a tip on styling the tick marks for a RadSlider?
I've managed to find this much, that I need to create a RadBarStyle but setting the Foreground doesn't change the ticks, setting the Background does change the bar's background, but has no effect on the ticks.
My code:
<StackPanel Grid.Column="1">
<StackPanel.Resources>
<Style x:Key="ticks" TargetType="{x:Type telerik:RadTickBar}">
<Setter Property="Foreground" Value="White" />
</Style>
</StackPanel.Resources>
<TextBlock Text="Brightness" Margin="5 5 0 10" />
<telerik:RadSlider ValueChanged="RadSlider_ValueChanged"
Ticks="0"
TickPlacement="Both"
Minimum="-100" Maximum="200" LargeChange="10"
SmallChange="5"
TickBarStyle="{StaticResource ticks}"
/>
</StackPanel>
The Tick is a rectangle, if you just want to change it's color you can use something like this:
<StackPanel Grid.Column="1">
<StackPanel.Resources>
<Style x:Key="ticks" TargetType="{x:Type telerik:RadTickBar}">
<Setter Property="Foreground" Value="White" />
</Style>
</StackPanel.Resources>
<TextBlock Margin="5 5 0 10" Text="Brightness" />
<telerik:RadSlider LargeChange="10"
Maximum="200"
Minimum="-100"
SmallChange="5"
TickBarStyle="{StaticResource ticks}"
TickPlacement="Both"
Ticks="0"
ValueChanged="RadSlider_ValueChanged">
<telerik:RadSlider.TickTemplate>
<DataTemplate>
<Rectangle Width="1"
Height="5"
Fill="Red" />
</DataTemplate>
</telerik:RadSlider.TickTemplate>
</telerik:RadSlider>
</StackPanel>
Related
Is it possible to make when i hover over grid (template for items control) to change font color for first and last column in a row (this specific row which i am hovering)
What i want is "RowNumbering" object to change font color when we hover his "parent" row. To sort of highlite that row text.
Imagine it as a table:
where o is just a seat, and numbers are row numbers, when i hover over "o" i would like to change row number font color. I hope it's clear what i try, i did strip xaml to a minimum. Also would love to have this done over xaml if possible instead over code. Example bellow when i hover over "o" in second row.
1 | o | o | o | o | 1
2 | o | o | o | o | 2
3 | o | o | o | o | 3
<ItemsControl ItemsSource="{Binding Seats}" Name="SeatsItems">
<ItemsControl.RenderTransform>
<TranslateTransform X="0" Y="0" />
</ItemsControl.RenderTransform>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid Name="ParentGrid" local:GridHelpers.RowCount="{Binding RowCount}"
local:GridHelpers.ColumnCount="{Binding ColumnCount}"
ShowGridLines="False" Background="#1C222E"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Grid.Row" Value="{Binding RowEx}" />
<Setter Property="Grid.RowSpan" Value="2" />
<Setter Property="Grid.Column" Value="{Binding ColumnEx}" />
<Setter Property="Grid.ColumnSpan" Value="{Binding ColSpan}" />
<Style.Triggers>
<!--
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="60"/>
</Trigger>
-->
</Style.Triggers>
<Style.Resources>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="Blue" />
<Style.Triggers>
<DataTrigger Binding="{Binding Status}" Value="Available">
<Setter Property="Stroke" Value="#5D606D" />
<Setter Property="Fill" Value="#5D606D" />
</DataTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type local:Seat}">
<Canvas Name="Canv" Width="30" Height="30" Margin="4" Background="Transparent"
Tag="{Binding ID}">
<Rectangle Name="RecTop" Canvas.Top="4" Canvas.Left="1" Width="28"
Height="18" RadiusX="2" RadiusY="2" />
<Rectangle Name="RecBot" Canvas.Top="23" Canvas.Left="1" Width="28"
Height="7" RadiusX="2" RadiusY="2" />
<!-- <TextBlock Text="{Binding Path=Column}" TextWrapping="Wrap"
TextAlignment="Center" VerticalAlignment="Center" /> -->
</Canvas>
</DataTemplate>
<DataTemplate DataType="{x:Type local:RowNumbering}">
<Canvas Width="30" Height="30" Margin="4" Background="Transparent">
<TextBlock Text="{Binding Path=Text}" Foreground="#5D606D"
TextWrapping="Wrap" TextAlignment="Center"
VerticalAlignment="Center" Width="30" Height="20"
Margin="0,5" />
</Canvas>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Screen}">
<Canvas Height="5" Margin="0,0,0,33" Background="#EA1C47" ClipToBounds="False">
</Canvas>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
I think you're using the wrong control type. WPF layout controls like Grid etc are useful when you want WPF to handle the layout of controls for you. In your case, however, the layout is already implicit in your data structures by virtue of the RowEx/ColumnEx properties. What you're trying to do is shoe-horn complex layout requirements into a layout control that's not really designed for it. You've already run into problems with this before, which has necessitated the use of that GridHelper. It's probably not going to get any better.
I write airline check-in systems for a living and find myself implementing systems very similar to what you're doing all the time. Experience has taught me that in cases like this, you're usually better off using a Canvas. It does require you to add much of the functionality that existing controls give you for free (e.g. row-specific behavior, which is something DataSet is better at handling), but it will give you complete flexibility over your layout and behaviors, and will also be much easier to unit-test.
To answer your question though, you could create a new class called Row with a transparent background that spans all of your columns. Bind that control's MouseEnter/MouseLeave events to update a local property in Row, and in those properties setters have them set/clear a highlight flag in the two RowNumbering instances that appear in that row. Alternatively each instance of RowNumbering could contain a property that points to its corresponding Row instance, and you could set a DataTrigger to trigger on that instead.
I am looking for a way to add colour to Segoe MDL2 icons. The glyphs in my application are currently TextBlock resources, defined like this:
<TextBlock x:Key="PenSymbol" x:Shared="False" FontFamily="Segoe MDL2 Assets" Text="" FontSize="16" TextOptions.TextRenderingMode="Grayscale"/>
The effect I'm after is the one in the left 3 icons:
This is a screenshot of the toolbar in Window 10 Sketchpad (after applying the Creators update).
Edit: I know how to change the text colour, I am trying to figure out how to get the "partial fill"-effect (blue, black and yellow in the screenshot).
Edit2: It is necessary to display 2 different glyphs to achieve this effect. The glyphs necessary for the background were added to the Segoe MDL2 font in the last update. Thanks to mm8 for pointing me in the right direction.
XAML:
<Style x:Key="SymbolText" TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="16"/>
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
<Setter Property="TextOptions.TextRenderingMode" Value="Grayscale"/>
</Style>
<StackPanel Orientation="Horizontal">
<Grid Margin="4">
<TextBlock Text="" Style="{StaticResource SymbolText}" Foreground="OrangeRed"/>
<TextBlock Text="" Style="{StaticResource SymbolText}"/>
</Grid>
<Grid Margin="4">
<TextBlock Text="" Style="{StaticResource SymbolText}" Foreground="LightGreen"/>
<TextBlock Text="" Style="{StaticResource SymbolText}"/>
</Grid>
<Grid Margin="4">
<TextBlock Text="" Style="{StaticResource SymbolText}" Foreground="LightBlue"/>
<TextBlock Text="" Style="{StaticResource SymbolText}"/>
</Grid>
</StackPanel>
Result:
Set the Foreground property to a Brush:
<TextBlock x:Key="PenSymbol" x:Shared="False" Foreground="Red" FontFamily="Segoe MDL2 Assets" Text="" FontSize="16"/>
Othwerwise layering and colorization effects can be achieved by drawing glyphs directly on top of each other as stated in the documentation on MSDN: https://learn.microsoft.com/en-us/windows/uwp/style/segoe-ui-symbol-font
You can put one gliph over another and colorize it this way. Example:
<Grid>
<FontIcon Foreground="#f8d876" FontFamily="Segoe MDL2 Assets" Glyph="" />
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" />
</Grid>
Result:
I made this and it works:
I've added a grid under a button, added two labels with MDL 2 icons and with some alignment it's an help button with a circular background!
<Button>
<Grid>
<Label Content='' Foreground="#FFBFBEBF" />
<Label Content='' Foreground="#FF0066FF" FontSize="18" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
</Grid>
</Button>
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) };
}
Can't get this to work:
<UserControl>
<UserControl.Resources>
<ResourceDictionary>
<Style x:Key="TestStyle" TargetType="{x:Type Button}">
<Setter Property="Button.Content">
<Setter.Value>
<Image Source="D:\Temp\dictionary16.png"/>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</UserControl.Resources>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
<Button Style="{StaticResource TestStyle}"/>
<Button Style="{StaticResource TestStyle}"/>
</StackPanel>
</UserControl>
This code throws the following exception (pointing to the second button):
Specified element is already the logical child of another element. Disconnect it first.
The style creates one instance of the Image, you cannot use it in two places like this. You can create the image as a separate resource with x:Shared= false and reference it in the style then a new one will be created in every place the style is used.
e.g.
<UserControl>
<UserControl.Resources>
<Image x:Key="img" x:Shared="false" Source="D:\Temp\dictionary16.png" />
<Style x:Key="TestStyle" TargetType="{x:Type Button}">
<Setter Property="Content" Value="{StaticResource img}" />
</Style>
</UserControl.Resources>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
<Button Style="{StaticResource TestStyle}" />
<Button Style="{StaticResource TestStyle}" />
</StackPanel>
</UserControl>
Already yesterday i found a user with a similar problem: WPF - Change a button's content in a style?
This post got me to this soloution (couldn't post it because of 8 hour limit of stackoverflow -.-)
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{mcWPF:LangRes imgSettings16, Bitmap}" Height="14"/>
</DataTemplate>
</Setter.Value>
</Setter>
Don't know weather this is more clean/dirty/better than H.B.'s soloution
I have a small problem while working on software for a Surface: I have a binded ScatterView and its items have a DataTemplate. My question is : how do I set the width and height of the ScatterViewItem that it is created from the ItemTemplate?
<s:ScatterView Name="svMain" Loaded="svMain_Loaded" ItemsSource="{Binding BallsCollection}" >
<s:ScatterView.ItemTemplate >
<DataTemplate>
<DockPanel LastChildFill="True" >
<DockPanel.Background>
<ImageBrush ImageSource="image\note.png" Stretch="Fill" />
</DockPanel.Background>
<TextBox Background="Transparent" DockPanel.Dock="Top" Text="{Binding Path=Message}"
IsReadOnly="True" TextWrapping="Wrap"></TextBox>
</DockPanel>
</DataTemplate>
</s:ScatterView.ItemTemplate>
</s:ScatterView>
I believe you can set that through the ItemContainerStyle, like with other ItemsControls, but i'm not certain, as i do not have the Surface SDK.
<s:ScatterView.ItemContainerStyle>
<Style TargetType="{x:Type s:ScatterViewItem}">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
</Style>
</s:ScatterView.ItemContainerStyle>
You can of course also use bindings instead fixed units.