Questions on UI for WPF Forum

1 answer

90 views

RadCircularProgressBar IsInderterminate animation inside RadWindow

RadCircularProgressBar IsIndeterminate animation is not working when placed inside a RadWindow with RadWindowInteropHelper.AllowTransparency set to 'false'.

I attached a project reproducing the behaviour.

Version 2024 Q2

CircularProgressBar

Window

answered on 15 Jul 2024

0 answers

114 views

RadWatermarkTextBox and EventToCommandBehavior

I'm trying to capture when the Enter key is pressed in a RadWatermarkTextBox without adding code to code-behind.

In the XAML I have:

            <telerik:RadWatermarkTextBox MinHeight="26"
                                         x:Name="searchCompleteBox"
                                         VerticalAlignment="Center"
                                         Text="{Binding SearchText, Mode=TwoWay}"
                                         Width="200" 
                                         WatermarkContent="Enter name, address, or ID">
                <telerik:EventToCommandBehavior.EventBindings>
                    <telerik:EventBinding Command="{Binding OnSearchCompleteBoxKeyDownCommand}"
                                     EventName="KeyDown"
                                     PassEventArgsToCommand="True" />
                </telerik:EventToCommandBehavior.EventBindings>
            </telerik:RadWatermarkTextBox>

In the ViewModel:

    private async void OnSearchCompleteBoxKeyDown(System.Windows.Input.KeyEventArgs e)
    {        
        if (e.Key == Key.Enter)
        {
            await SearchForMembersAsync();
        }
    }

The problem is SearchText is not updating. So if I type something like "smith" OnSearchCompleteBoxKeyDown fires five times, the if result is false five times, but SearchText contains an empty string instead of "smith".

SearchText is declared properly and is updated properly if I take the EventToCommandBehavior code out. This all works properly if I use code-behind but I want to avoid that.

WatermarkTextBox

asked on 14 Jul 2024

1 answer

114 views

RadCartesianChart Annotation Questions

Hello, I have two questions regarding the RadCartesianChart Annotations.

Question 1:

I have attached an example project to this question. When I first open the example project the text of the Annotation seems to be cut off. This fixes itself if the window is resized and the problem doesn't seem to occur again. Is there a way to not have this cut off text? Am I setting a property incorrectly?

Question 2:

In the same attached project I have one of the annotation labels set to the location bottom; however, I can't seem to find it in my window. Is there something I am missing to get this text to show up?

Here is the relevant xaml:

<telerik:RadCartesianChart Grid.Row="1" >

    <telerik:RadCartesianChart.Annotations>

        <telerik:CartesianGridLineAnnotation Value="20" Stroke="Red" FontSize="20" StrokeThickness="5" Axis="{Binding ElementName=horizontalAxis1}" Label="Example" Foreground="Black">
            <telerik:CartesianGridLineAnnotation.LabelDefinition>
                <telerik:ChartAnnotationLabelDefinition Location="Inside" HorizontalAlignment="Center" />
            </telerik:CartesianGridLineAnnotation.LabelDefinition>
        </telerik:CartesianGridLineAnnotation>

        <telerik:CartesianGridLineAnnotation Value="25" Stroke="Red" FontSize="20" StrokeThickness="5" Axis="{Binding ElementName=horizontalAxis1}" Label="Example" Foreground="Black">
            <telerik:CartesianGridLineAnnotation.LabelDefinition>
                <telerik:ChartAnnotationLabelDefinition Location="Inside" HorizontalAlignment="Center" />
            </telerik:CartesianGridLineAnnotation.LabelDefinition>
        </telerik:CartesianGridLineAnnotation>

        <telerik:CartesianGridLineAnnotation Value="30" Stroke="Red" FontSize="20" StrokeThickness="5" Axis="{Binding ElementName=horizontalAxis1}" Label="Example" Foreground="Black">
            <telerik:CartesianGridLineAnnotation.LabelDefinition>
                <telerik:ChartAnnotationLabelDefinition Location="Bottom" HorizontalAlignment="Center" />
            </telerik:CartesianGridLineAnnotation.LabelDefinition>
        </telerik:CartesianGridLineAnnotation>
    </telerik:RadCartesianChart.Annotations>

    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries ShowLabels="True"
                           CategoryBinding="Category"
                           ValueBinding="Value">

            <telerik:BarSeries.LabelDefinitions>

                <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Center">
                    <telerik:ChartSeriesLabelDefinition.DefaultVisualStyle>
                        <Style TargetType="TextBlock">
                            <Setter Property="Foreground" Value="White"/>
                        </Style>
                    </telerik:ChartSeriesLabelDefinition.DefaultVisualStyle>
                </telerik:ChartSeriesLabelDefinition>

                <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Top">
                    <telerik:ChartSeriesLabelDefinition.Template>
                        <DataTemplate>
                            <TextBlock Foreground="#5AA4D4" FontWeight="Bold" Text="{Binding DataItem.Value}" />
                        </DataTemplate>
                    </telerik:ChartSeriesLabelDefinition.Template>
                </telerik:ChartSeriesLabelDefinition>

            </telerik:BarSeries.LabelDefinitions>

            <telerik:BarSeries.DataPoints>
                <telerik:CategoricalDataPoint Category="Apples" Value="20"/>
                <telerik:CategoricalDataPoint Category="Bananas" Value="28"/>
                <telerik:CategoricalDataPoint Category="Oranges" Value="17"/>
                <telerik:CategoricalDataPoint Category="Strawberries" Value="30"/>
            </telerik:BarSeries.DataPoints>
        </telerik:BarSeries>
    </telerik:RadCartesianChart.Series>

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:LinearAxis x:Name="horizontalAxis1"/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.VerticalAxis>


</telerik:RadCartesianChart>

Thank You,

Giuliano

Chart

answered on 12 Jul 2024

1 answer

139 views

RadGridView - Custom Filtering Controls for a list of viewmodels

Hi good morning, I need help with the design and how to implement a custom filter. If you can help me with a small example, I have been reading the "Custom Filtering Controls" documentation (https://docs.telerik.com/devtools/wpf/controls/radgridview/filtering/custom-filtering-controls) but I am having trouble implementing it for this case.

Currently I have a RadGridView, which shows a list of orders. One of the columns shows a list of icons:

public required List<IMvvmViewModel?> DesignStatusViewModels { get; set; }

Column:

<telerik:GridViewDataColumn IsReadOnly="True" HeaderCellStyle="{StaticResource DesignStatusCellStyle}">
<telerik:GridViewDataColumn.Header>
<TextBlock
Text="Design Status"
MinWidth="100"
Width="Auto"
TextAlignment="Center">
</TextBlock>
</telerik:GridViewDataColumn.Header>
<telerik:GridViewDataColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding DesignStatusViewModels}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel
Orientation="Horizontal"
HorizontalAlignment="Right"
TextElement.FontSize="12"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentPresenter
Grid.Row="0"
Content="{Binding }"
VerticalAlignment="Center"
ContentTemplateSelector="{StaticResource DesignStatusContentTemplateSelector}"
Margin="2,0,2,0"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>

Each IMvvmViewModel has a bool, and a template, the template is responsible for showing the activated or not activated icon for each case, for example:

[DesignStatusTemplates(Template = typeof(DesignStatusRushOrderTemplate))]
publicpartialclassDesignStatusRushOrderViewModel : IMvvmViewModel
{
publicbool IsRush { get; set;}
}

[DesignStatusTemplates(Template = typeof(DesignStatusExternalOrderTemplate))]
publicpartialclassDesignStatusExternalOrderViewModel : IMvvmViewModel
{
publicbool IsExternal { get; set;}
}

What I need is to make a custom filter for this column, which can filter with a checkbox or whatever is easier, for example all orders that have DesignStatusRushOrderViewModel -> IsRush == true.

Thank you very much! Juan

GridView

updated answer on 12 Jul 2024

1 answer

75 views

gridview selection style

Hi, i would like to remove the "orange rectangle" around the selected row, is it possibile?

i looked into the row structure, is it possible remove or collapse the "PART_RowBorder" ?

Thanx

GridView

answered on 11 Jul 2024

0 answers

77 views

RadWindow transparent background

RadWindows appear transparent in Windows 11 Theme when running Windows 11 in Parallels Desktop with Coherence Mode activated.

Window

asked on 11 Jul 2024

1 answer

100 views

Changing font size RadNavigationView menu items

The RadNavigationView menu items don't seem to respect font size palatte settings. That is,

        FluentPalette.Palette.FontSize = FontSize;
        FluentPalette.Palette.FontSizeS = FontSizeSmall;
        FluentPalette.Palette.FontSizeL = FontSizeLarge;

will change the font sizes in grids, buttons, regular menus, etc., but not navigation menu items. How can we get this working? XAML code:

    <Window.Resources>
        <telerik:StringToGlyphConverter x:Key="StringToGlyphConverter" />
            <Style TargetType="telerik:RadNavigationViewItem">
                <Setter Property="Content" Value="{Binding Title}" />
                <Setter Property="ItemsSource" Value="{Binding SubItems}"/>
                <Setter Property="Icon" Value="{Binding IconGlyph}" />
                <Setter Property="IconTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <telerik:RadGlyph Glyph="{Binding Converter={StaticResource StringToGlyphConverter}}" Font="fas" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    </Window.Resources>

        <telerik:RadNavigationView Grid.Row="1"
            x:Name="NavigationView" ItemsSource="{Binding MenuItems}"
                                   AutoChangeDisplayMode="False"
                                   DisplayMode="Expanded"
                                   AllowMultipleExpandedItems="True"
                                   SubItemsIndentation="15"
                                   telerik:AnimationManager.IsAnimationEnabled="True"
                                   SelectionChanged="OnNavigationViewSelectionChanged">
            <telerik:RadNavigationView.Content>
                <Frame
                                Background="#00000000"
                                NavigationUIVisibility="Hidden"
                                Content="{Binding ContentPage}"/>
            </telerik:RadNavigationView.Content>
            <telerik:RadNavigationView.PaneFooter>
                <telerik:RadNavigationViewItem Content="Settings" 
                                               Command="{Binding NavigateItemSelectedCommand}"
                                               CommandParameter="Settings"
                                               IconTemplate="{x:Null}">
                    <telerik:RadNavigationViewItem.Icon>
                        <telerik:RadGlyph Glyph="&#xf013;" Font="fas" />
                    </telerik:RadNavigationViewItem.Icon>
                </telerik:RadNavigationViewItem>
            </telerik:RadNavigationView.PaneFooter>
        </telerik:RadNavigationView>

NavigationView (Hamburger Menu)

answered on 11 Jul 2024

1 answer

81 views

change default highlighted color

Hi, i would like to change the default highlighted color (the line around the focused control now orange) for all components in the application?

thanx

General Discussions

answered on 09 Jul 2024

0 answers

66 views

RichTextBox problem with

Hello,

I tried to make a word document viewer with richtextboxes. The structure is displayed correctly, except for the parts where there are text boxes or comboboxes.
Attached is an example of the display difference.
Any help would be greatly appreciated.

I'm using Q1 2024 version of controls.

RichTextBox

asked on 05 Jul 2024

1 answer

97 views

Defining Opacity Using a Resource Dictionary

How do I declare these properties in a resource dictionary instead of code? I can't quite get the proper syntax.

FluentPalette.Palette.DisabledOpacity = 0.5; 
FluentPalette.Palette.ReadOnlyOpacity = 0.4;

Styling

answered on 05 Jul 2024