Questions on UI for WPF Forum

2 answers

188 views

Correct Template for RadPanegRoup when TabStripPlacement is set to Top

Hi. Curently I faced with an issue that I cannot correctly hide tab if I have only one RadPane in the window.

What I am trying to to is the following: I wish to have PaneHeader if I have only one RadPane in the group and hide it and show tabs if more thatn one RadPane. Also I want to completely hide everything if this RadPane is inside ToolWindow. (Similar to Bottom template, but with differ that tabs are on top)

What I have currently:

It works when I undock it to ToolWIndow, but fails when I dock it again in the right/left parts of the docking control. Seems binding in the trigger simply does not work.

I am attaching my TopRadPane group Template. Please, point me what I am doing wrong:

<ControlTemplate x:Key="RadPaneGroupTopControlTemplate" TargetType="telerikDocking:RadPaneGroup">
        <Grid>
            <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <dock:RadGridResizer x:Name="DockResizer" Placement="Left" ShowsPreview="True" Visibility="Collapsed"/>
        <Border
                x:Name="HeaderTabs"
                Grid.Column="1">
            <Grid x:Name="ItemsContainer" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ItemsPresenter x:Name="ItemsPresenterElement" Margin="0"/>
                <telerik:RadButton x:Name="CloseButton"
                                   Grid.Column="1"
                                   Command="telerikDocking:RadDockingCommands.Close"
                                   Style="{StaticResource RadButtonDocumentCloseStyle}"
                                   Visibility="{Binding IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            </Grid>
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="Visibility" Value="Visible"/>
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=IsInToolWindow}" Value="true" />
                                <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=IsSingleItem}" Value="true" />
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Visibility" Value="Collapsed" />
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            
        </Border>
        <dock:PaneHeader Grid.Column="1" 
                         x:Name="HeaderElement" 
                         SelectedPane="{TemplateBinding SelectedPane}"
                         Visibility="Collapsed">
            <!-- <dock:PaneHeader.Style> -->
            <!--     <Style TargetType="dock:PaneHeader" BasedOn="{StaticResource PaneHeaderStyle}"> -->
            <!--         <Setter Property="Visibility" Value="Collapsed"/> -->
            <!--         <Style.Triggers> -->
            <!--             <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=., Converter={StaticResource HeaderVisibilityConverter}}" Value="True"> -->
            <!--                 <Setter Property="Visibility" Value="Visible"/> -->
            <!--             </DataTrigger> -->
            <!--         </Style.Triggers> -->
            <!--     </Style> -->
            <!-- </dock:PaneHeader.Style> -->
        </dock:PaneHeader>
        <Border x:Name="BorderVisual"
                Grid.Column="1"
                Grid.Row="1"
                Grid.RowSpan="1"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{TemplateBinding BorderBrush}"
                Background="{TemplateBinding Background}"/>
        <Border x:Name="AccentBorderVisual"
                Grid.Column="1"
                Grid.Row="1"
                Grid.RowSpan="1"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(helpers:ThemeHelper.CheckedBrush)}"
                Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedPane.IsActive, Converter={StaticResource BooleanToVisibilityConverter}}"/>
        <Grid Grid.Row="1" Grid.Column="1">
            <ContentPresenter x:Name="ContentElement"
                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
                    ContentTemplate="{TemplateBinding SelectedContentTemplate}"
                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                    Margin="{TemplateBinding Padding}"/>
            <Grid x:Name="ContentElementsPanel" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BooleanToVisibilityConverter}}"/>
        </Grid>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Left</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible"/>
                <Setter TargetName="DockResizer" Property="Grid.RowSpan" Value="3"/>
                <Setter TargetName="DockResizer" Property="Placement" Value="Left"/>
                <Setter TargetName="DockResizer" Property="MinWidth" Value="10"/>
            </Trigger>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Top</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible"/>
                <Setter TargetName="DockResizer" Property="Grid.ColumnSpan" Value="2"/>
                <Setter TargetName="DockResizer" Property="Placement" Value="Top"/>
                <Setter TargetName="DockResizer" Property="MinHeight" Value="10"/>
                <Setter TargetName="DockResizer" Property="VerticalAlignment" Value="Top"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="ContentElement" Property="Opacity" Value="{telerik:Office2019Resource ResourceKey=DisabledOpacity}"/>
                <Setter Property="Foreground" Value="{telerik1:Office2019Resource ResourceKey=DisabledForegroundBrush}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Docking

answered on 04 Jun 2024

1 answer

142 views

RadVirtualGrid - CellValueNeeded doesn't support complex data types?

I have a list of <Data>, which I use to bind to a VirtualGrid
Data:

-Value [InnerData]:

-- Name [string]

-- Description [string]

I use CellTemplateNeeded event handler to select a DataTemplate for the columns :

private void RadVirtualGrid_CellTemplateNeeded(object sender, CellTemplateEventArgs e)
{
  e.DataTemplate = this.Resources["Template"] as DataTemplate;
}

        <DataTemplate x:Key="Template">
            <StackPanel>
                <Label Content="{Binding Name}" />
                <Label Content="{Binding Description}" />
            </StackPanel>
        </DataTemplate>

And then I use CellValueNeeded to set the Value:

private void RadVirtualGrid_CellValueNeeded(object sender, CellValueEventArgs e)
{
  e.Value = viewModel.List[e.RowIndex].Value;
}

So, basically I want to be able to "bind" an object to the Value of the Column.

Then, I want to display multiple properties of the object in the DataTemplate.

It works fine with string data, for e.g.:

e.Value = viewModel.List[e.RowIndex].Value.Name

<Label Content="{Binding }" />

It doesn't work with objects:

e.Value = viewModel.List[e.RowIndex].Value

<Label Content="{Binding Name}" />

A workaround was to "bind" to a string which contains both properties, $"{name}--#--{description}", then use a converter to get the name and description and display it.
But, I want to be able to pass an object, as I might need to display multiple properties.

Is there a limitation here? Can you recommend a better way to do it?

Thanks

VirtualGrid

answered on 04 Jun 2024

0 answers

151 views

RadRichTextBox Basealignment is not changing

In my project, there is radrichtextbox. I am trying to change fontfamily and basealignment of the text present inside the radrichtextbox whenever that radrichtextbox loads using below code.

radRichTextBox.FontFamily = new System.Windows.Media.FontFamily("Symbol");
radRichTextBox.ChangeBaselineAlignment(Telerik.Windows.Documents.Model.BaselineAlignment.Subscript);

But I see no change in the text. Am I missing something?

General Discussions

RichTextBox

asked on 04 Jun 2024

1 answer

201 views

[Solved] ValidationErrorTemplate: ToolTip display mode on MultiColumnComboBox ?

Hi,

I'm using a RadMultiColumnComboBox and can't seem to be able to set the validation error template to Tooltip using:

telerik:ValidationErrorTemplateHelper.DisplayMode="ToolTip"

It always set the validation message on the right of the control, and in my case it's being clipped by the windows limits.

This usually works great on all other controls.

Thank you for your help

MultiColumnComboBox

answered on 03 Jun 2024

0 answers

147 views

Null pane with custom RemovePane method

I'm getting a null reference exception when closing one of the pane and could not figure out why it is null in the RemovePane(RadPane pane) method.

We have override to that method,

protected override void RemovePane(RadPane pane)
        {
            if(pane.Header.ToString().ToLower()=="digital" || pane.Header.ToString().ToLower() == "analog")
                SaveDebugPaneLayout(pane);
            pane.DataContext = null;
            pane.Content = null;
            pane.ClearValue(RadDocking.SerializationTagProperty);
            pane.RemoveFromParent();
        }

And also the CreatePaneForItem method,

protected override RadPane CreatePaneForItem(object item)
        {
            var viewModel = item as DebugPaneViewModel;
            if (viewModel != null)
            {
                var pane = viewModel.IsDocument ? new RadDocumentPane() : new RadPane();

                pane.DataContext = item;
    
                if (viewModel.ContentType != null)
                {
                    if (viewModel.GetType().ToString().EndsWith("EditorViewModel")) 
                    {
                        if (pane.Content == null)
                        {
                            dynamic obj = Activator.CreateInstance(viewModel.ContentType);
                            pane.Content = obj;
                            obj.DataContext = viewModel;
                        }
                    }
                    else
                    {
                        pane.Content = Activator.CreateInstance(viewModel.ContentType);
                    }
                }

                RadDocking.SetSerializationTag(pane, viewModel.ID);
                return pane;
            }

            return base.CreatePaneForItem(item);
        }

How can I know which pane is null when it is executing the RemovePane(). I tried looking at when panes are being added but did not see anything suspicious.

Docking

asked on 31 May 2024

1 answer

205 views

How to display the drop down with all records on arrow key down in RadAutoCompleteBox

Dear All,

I am using the RadAutoCompleteBox as follows. I would like to display all Products when pressing the "Keyboard Down Arrow" on the RadAutoCompleteBox. Is this possible?

<telerik:RadAutoCompleteBox Height="23" Width="180" Background="#FFEDF4AB" Margin="3,0,0,0" 
							ItemsSource="{Binding Products}" 
							SelectedItem="{Binding SelectedProductItem, Mode=TwoWay}"                                                
							SelectionMode="Single" 
							TextSearchMode="StartsWith"
							SearchText="{Binding Name, Mode=TwoWay}"
							TextSearchPath="Name"
							DisplayMemberPath="Name"
							AutoCompleteMode="Suggest" >
	<telerik:RadAutoCompleteBox.DropDownItemTemplate>
		<DataTemplate>
			<StackPanel Orientation="Horizontal">
				<TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="Black" Width="200" />
			</StackPanel>
		</DataTemplate>
	</telerik:RadAutoCompleteBox.DropDownItemTemplate>
	<Behaviors:Interaction.Triggers>
		<Behaviors:EventTrigger EventName="SelectionChanged">
			<Behaviors:InvokeCommandAction Command="{Binding SelectProductCommand}" />
		</Behaviors:EventTrigger>
	</Behaviors:Interaction.Triggers>
</telerik:RadAutoCompleteBox>

AutoCompleteBox

answered on 31 May 2024

0 answers

105 views

Style or Template for RadToolBarOverflowPanel

Hello,

is there a way to style the RadToolBarOverflowPanel? Or add a template for its items?

I would like to display the button on the left side and show the tooltip next to it.

Any help would be appreciated.

Best regards :)

Styling

ToolBar

asked on 30 May 2024

1 answer

143 views

Correctly style PaneHeaders in different RadPaneGroups

Hi, I have an issue trying to style RadDocking control.

I want that my PaneHeaders change their background when user selects them. I tried to modify RadPaneGroup ControlTemplate and RadPane Control Template, but with no luck. Could you please provide me detail sample for that?

One more question - how to correctly control height of the RadGroupHeader (Part where PaneHeaders *(tabs) are suited)? I simply dont understand which part of template should be responcible for that.

P.S. I am using Office 2019 theme.

Docking

answered on 30 May 2024

0 answers

120 views

AStarRouter

Can you please give a small example of "AStart Router" used in routing with tree layout.

Diagram

asked on 28 May 2024

0 answers

150 views

GridViewDataColumn ; SearchBox error in Distinct values

I have customized filtering control along with behavior,

Im trying to use SearchBox control in distinct values filter ive tried "EnableDistinctValuesFiltering="True""
even though i have search box it doest work,

example: in this screenshot ive type pending but the list still remains the same

here is my style

GridView

updated question on 27 May 2024