I'm working with a telerik:RadTimeBar and as the title suggests I'm trying to change the color of the Interval's Label Color. The following is my RadTimeBar:
<telerik:RadTimeBar x:Name="PoCTimeBar" Width="450"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Background="#FF435061"
BorderBrush="{x:Null}"
BorderThickness="1,0,1,1"
Content=""
Cursor="Hand"
EnableSparklineVirtualization="False"
PeriodEnd="{Binding Tab.CurrentPoC.EndDate, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
PeriodStart="{Binding Tab.CurrentPoC.StartDate}"
ScrollMode="None"
SelectionEnd="{Binding Tab.CurrentPoC.PickEnd, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectionStart="{Binding Tab.CurrentPoC.PickStart, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectionTitleFormatString="{}{0:dd/MM/yy-HH:mm} - {1:dd/MM/yy-HH:mm}"
VisiblePeriodEnd="{Binding Tab.CurrentPoC.EndDate, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
VisiblePeriodStart="{Binding Tab.CurrentPoC.StartDate}">
<telerik:RadTimeBar.Intervals>
<telerik:HourInterval />
<telerik:DayInterval />
<telerik:MonthInterval />
<telerik:YearInterval />
</telerik:RadTimeBar.Intervals>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<Custom:EventToCommand Command="{Binding Tab.IRefreshSpanPoC, Mode=OneWay}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</telerik:RadTimeBar>
Could you please help me figure out how to achieve this? Thanks a lot.
You have two intervals' header in the RadTimeBar control, the top one and the one under it. For the top one you can change its color by setting the Foreground of the parent telerik:ItemControl, for the bottom one you target the telerik:GroupControl:
<Grid>
<telerik:RadTimeBar PeriodStart="1-Jan-2019 12:00:00 AM"
PeriodEnd="31-Dec-2019 11:59:59 PM"
VisiblePeriodStart="14-March-2019 12:00:00 AM"
VisiblePeriodEnd="11-Nov-2019 11:59:59 PM" >
<telerik:RadTimeBar.Resources>
<Style TargetType="telerik:ItemControl">
<Setter Property="Foreground" Value="Red" />
</Style>
<Style TargetType="telerik:GroupControl">
<Setter Property="Foreground" Value="Blue" />
</Style>
</telerik:RadTimeBar.Resources>
<telerik:RadTimeBar.Intervals>
<telerik:YearInterval />
<telerik:MonthInterval />
<telerik:WeekInterval />
<telerik:DayInterval />
</telerik:RadTimeBar.Intervals>
</telerik:RadTimeBar>
</Grid>
How do i know this?
You have two tools to use in these scenarios in addition to the documentation:
Blend: you select the control> right click and then Edit template > Edit a copy.
Snoop
EDIT
Here the style applied to your code (with some minor adjustment to the start and end dates):
<telerik:RadTimeBar x:Name="PoCTimeBar" Width="450"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Background="#FF435061"
BorderBrush="{x:Null}"
BorderThickness="1,0,1,1"
Content=""
Cursor="Hand"
EnableSparklineVirtualization="False"
PeriodEnd="31-Dec-2019 11:59:59 PM"
PeriodStart="1-Jan-2019 12:00:00 AM"
ScrollMode="None"
SelectionEnd="{Binding Tab.CurrentPoC.PickEnd, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectionStart="{Binding Tab.CurrentPoC.PickStart, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectionTitleFormatString="{}{0:dd/MM/yy-HH:mm} - {1:dd/MM/yy-HH:mm}"
VisiblePeriodEnd="{Binding Tab.CurrentPoC.EndDate, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
VisiblePeriodStart="{Binding Tab.CurrentPoC.StartDate}">
<telerik:RadTimeBar.Resources>
<Style TargetType="telerik:ItemControl">
<Setter Property="Foreground" Value="Red" />
</Style>
<Style TargetType="telerik:GroupControl">
<Setter Property="Foreground" Value="Blue" />
</Style>
</telerik:RadTimeBar.Resources>
<telerik:RadTimeBar.Intervals>
<telerik:HourInterval />
<telerik:DayInterval />
<telerik:MonthInterval />
<telerik:YearInterval />
</telerik:RadTimeBar.Intervals>
<!--<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<Custom:EventToCommand Command="{Binding Tab.IRefreshSpanPoC, Mode=OneWay}" />
</i:EventTrigger>
</i:Interaction.Triggers>-->
</telerik:RadTimeBar>
Output
Here without the styles:
Make sure that you aren't applying any other style somewhere else.
Related
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>
I have an image control on which the user can drag and drop pictures. When no image has been dropped in there and the control is empty, I'd like to show an alternative text such as "Drop a picture here" to better indicate what is expected from him/her.
I can't figure out how to use triggers with this, this shows nothing at all and I can no longer drop pictures on my image control:
<StackPanel Grid.Column="1" Grid.Row="2" FlowDirection="LeftToRight" Orientation="Horizontal" Margin="0px 4px">
<StackPanel.Resources>
<DataTemplate x:Key="tmpTemplate">
<Border BorderThickness="2" BorderBrush="#FF969DFF" CornerRadius="2" VerticalAlignment="Top">
<DockPanel>
<Image Name="imgSelectedViewImage" Source="{Binding Image}" MinWidth="32" MinHeight="32" MaxWidth="48" MaxHeight="48"
HorizontalAlignment="Left" Stretch="None"
IsEnabled="{Binding EditMode}" Margin="2px"/>
<Label Content="Drag here" Name="AltText" Visibility="Collapsed"></Label>
</DockPanel>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Image}" Value="{x:Null}">
<Setter TargetName="AltText" Property="Visibility" Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</StackPanel.Resources>
I can't tell you what you've done to break your previously working drag and drop functionality and all I can do is to suggest you undo your changes to remedy that. However, if you want to display something when a collection is empty, then there's an easy way to do that. Using the collection's Count property is no good because it won't update when items are added or removed.
You can simply add an int property next to your item collection for this, but you have to make sure that you notify the INotifyPropertyChanged interface for it also when the collection property changes:
public ObservableCollection<YourItem> YourItems
{
get { return yourItems; }
set
{
yourItems = value;
NotifyPropertyChanged("YourItems");
NotifyPropertyChanged("YourItemsCount");
}
}
public int YourItemsCount
{
get { return YourItems.Count; }
}
Then you can use it in a simple DataTrigger like this:
<Grid>
<!-- Put your normal content here -->
<TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"
Text="Drop images here">
<TextBlock.Style>
<Style>
<Setter Property="TextBlock.Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding YourItemsCount}" Value="0">
<Setter Property="TextBlock.Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
I did it by setting the TargetNullValue and the FallbackValue to a static resource. See the code snippet below. You can of course set it to everything else you want.
<Image Stretch="Uniform"
Grid.Row="0"
Grid.Column="1"
MaxHeight="250"
MaxWidth="250"
Margin="10"
Source="{Binding Path=Character.Portrait, TargetNullValue={StaticResource FallbackImage}, FallbackValue={StaticResource FallbackImage}}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<cal:ActionMessage MethodName="ChangePicture">
</cal:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
</image>
Another approach, which could be more to your liking, as it uses triggers could be this solution: Handling null when binding to an Image in XAML (look at the accepted answer). However in my opinion setting TargetNullValue and the FallbackValue is the best way to go.
I have the following xaml code defined for DataGridTextColumn of a DataGrid.
<DataGridTextColumn x:Name="UserIdColumn" Binding="{Binding Path=UserId}" HeaderStyle="{StaticResource DataGridHeaderStyle}"/>
And Here is the HeaderStyle for the DataGridTextColumn
<Style x:Key="DataGridHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<StackPanel>
<TextBlock x:Name="ColumnName" Text="UserId" />
<TextBox x:Name="UserIdFilter" Width="100">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<cal:ActionMessage MethodName="UserIdFilterChanged">
<cal:Parameter Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridTextColumn}}, Path=Name}"/>
<cal:Parameter Value="{Binding ElementName=UserIdFilter, Path=Text}" />
</cal:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As one can see I am trying to access the DataGridTextColumn's Name property inside the DataGridColumnHeader's ControlTemplate using this line of code
<cal:Parameter Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridTextColumn}}, Path=Name}"/>
The above line is returning null, why ?
Is there any other way to get hold of DataGridTextColumn's Name property from DataGridColumnHeader's control template ?
You are recovering a null value for 2 different reasons:
The first one is that the DataGridTextColumn is not part of the visual tree and is not a visual instance of the datagrid. This is just an instance that descibes how a column of the datagrid should be displayed. Thus, DataGridTextColumn is not part of the ancestors of you cell.
The only way I see to recover your DataGridTextColumn is to proceed somehow like that:
<TextBox x:Name="UserIdFilter" Width="100" Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}, Path=Columns[0]}">
This way, you should set the Tag property of the Textbox with the instance of the DataGridTextColumn (you can check with snoop that it works properly)
Then, the second reason explaining why you have a null value is that the DataGridTextColumn has no Name property.
What you could do is simply create an attached property like this one:
public class XamlHelper
{
public static readonly DependencyProperty NameProperty = DependencyProperty.RegisterAttached("Name", typeof(string), typeof(XamlHelper));
public static string GetName(DependencyObject obj)
{
return (string)obj.GetValue(NameProperty);
}
public static void SetName(DependencyObject obj, string value)
{
obj.SetValue(NameProperty, value);
}
}
... replace the name of the column definition by this one:
<DataGridTextColumn alias:XamlHelper.Name="UserIdColumn" Binding="{Binding Path=UserId}" HeaderStyle="{StaticResource DataGridHeaderStyle}"/>
and retrieve the property this way:
<Style x:Key="DataGridHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<StackPanel>
<TextBlock x:Name="ColumnName" Text="UserId" />
<TextBox x:Name="UserIdFilter" Width="100" Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}, Path=Columns[0]}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<cal:ActionMessage MethodName="UserIdFilterChanged">
<cal:Parameter Value="{Binding ElementName=UserIdFilter, Path=Tag.(alias:XamlHelper.Name)}"/>
<cal:Parameter Value="{Binding ElementName=UserIdFilter, Path=Text}" />
</cal:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
... hope I didn't made too much mistakes in this code but I think something like that should work
Notice that I used the tag property of the textbox has a buffer because I am note sure the findAncestor mode of the binding is able to recover the datagrid properly (I had some issues on elements that are not is the visual tree). Maybe having a unique binding in you parameter also work...
Tag is also great to make tests because it allows to see the value in snoop!
Do not hesitate if some points are not clear enougth
edit:
I checked out the DataGridCOlumnHeaderClass and I discovered the property that seems to contain what you expected...
Thus, it should be possible to do that:
<Style x:Key="DataGridHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<StackPanel>
<TextBlock x:Name="ColumnName" Text="UserId" />
<TextBox x:Name="UserIdFilter" Width="100" Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridColumnHeader}}, Path=Column}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<cal:ActionMessage MethodName="UserIdFilterChanged">
<cal:Parameter Value="{Binding ElementName=UserIdFilter, Path=Tag.(alias:XamlHelper.Name)}"/>
<cal:Parameter Value="{Binding ElementName=UserIdFilter, Path=Text}" />
</cal:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a button that has its content (text) set dynamically via a style against a backing property as below.
<Button>
<Button.Style>
<Style>
<Setter Property="Button.Content" Value="Advanced Search" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsAdvancedSearch}" Value="True">
<Setter Property="Button.Content" Value="Standard Search" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I need to change this button to display just a hyperlink with the same dynamic text. Like this:
<Button>
<Button.Template>
<ControlTemplate>
<TextBlock>
<Hyperlink>
Standard Search
</Hyperlink>
</TextBlock>
</ControlTemplate>
</Button.Template>
</Button>
Is there a way to set the hyperlink's text (inline or some other tag) dynamically via a style still?
I haven't been able to get access to it via XAML. I got it working with a normal binding on a textblock inside the hyperlink but that is creating a redundant property on the viewmodel really.
You can embed another TextBlock inside your Hyperlink and bind it:
<TextBlock>
<Hyperlink>
<TextBlock Text="{Binding LinkText}" />
</Hyperlink>
</TextBlock>
Solution was to simply apply the style to an inner Textblock.
<Button x:Name="SwitchSearchType">
<Button.Template>
<ControlTemplate>
<TextBlock>
<Hyperlink>
<Hyperlink.Inlines>
<TextBlock>
<TextBlock.Style>
<Style>
<Setter Property="TextBlock.Text" Value="Advanced Search" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsAdvancedSearch}" Value="True">
<Setter Property="TextBlock.Text" Value="Standard Search" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Hyperlink.Inlines>
</Hyperlink>
</TextBlock>
</ControlTemplate>
</Button.Template>
</Button>
<GridViewColumn Header="{x:Static lang:Lang.wName}" CellTemplate="{StaticResource Template_DebitAccount}" />
And use into skin file
<DataTemplate x:Key="Template_DebitAccount">
<Border Padding="3" >
<TextBlock Text="{Binding wDebitAccountName}" Style="{StaticResource TextStyle_Path}">
<TextBlock.InputBindings>
<MouseBinding MouseAction="LeftClick" Command="{Binding DataContext.Base_PopPageCommand , RelativeSource={RelativeSource AncestorType=ListView}}" >
<MouseBinding.CommandParameter>
<MultiBinding Converter="{StaticResource MultiValueBindingConverter}">
<Binding Source="AgentSummary" />
<Binding Path="Link_Text"/>
</MultiBinding>
</MouseBinding.CommandParameter>
</MouseBinding>
</TextBlock.InputBindings>
</TextBlock>
</Border>
</DataTemplate>
Given:
<Hyperlink x:Name="uriEmailAddress" Click="Hyperlink_Click"></Hyperlink>
Code:
string e = Properties.Settings.Default.Email;
uriEmailAddress.NavigateUri = new Uri("mailto:" + e);
InlineCollection ic = uriEmailAddress.Inlines;
ic.Add(new Run(e));
Well i guess it's easy my scenario is having 2 elements:
ListBox and Button:
<ListBox Name="BannedItemsListBox"
Margin="5"
MinWidth="100"
MaxWidth="100" " Height="
204" ItemsSource="{Binding Path=BannedItems, Mode=TwoWay}"></ListBox>
<Button Name="RemoveBannedItemsButton"
Margin="5"
MinWidth="65"
Height="22"
Click="RemoveBannedItemButton_Click">Remove</Button>
I want to bind the IsEnabled property button to be true only if Item from ListBox is selected (focused) in XAML
I tried
IsEnabled="{Binding ElementName=BannedSourcesListBox, Path=TouchesDirectlyOver.Count}"
but no go.
What does the selection have to do with the Touches? (Also the ElementName is off)
I would try this:
IsEnabled="{Binding SelectedItems.Count, ElementName=BannedItemsListBox}"
Explanation: Basically the binding system tries to convert the input to the property at hand, a boolean, so when it gets an integer, 0 will be converter to false, anything higher to true. So the Button will be enabled if one or more items are selected.
<Button Content="Button"
Height="23"
HorizontalAlignment="Left"
Margin="138,12,0,0"
Name="button1"
VerticalAlignment="Top"
Width="75"
Click="button1_Click">
<Button.Style>
<Style>
<Setter Property="Button.IsEnabled"
Value="True" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=lstTest , Path=SelectedItem}"
Value="{x:Null}">
<Setter Property="Button.IsEnabled"
Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>