Telerik Forums
UI for WinUI Forum
2 answers
3 views

In the Grid there are three rows. On the top row is the DataGrid control and on in the middle row there is GridSplitter control then on the bottom is the TabControl.

The requirement is for the GridControl to resize when the GridSplitter resizes the Grid.  There should be a MinHeight property set to display a minimum of 6 rows and GridControl should resize.

Current behavior is that GridControl takes all the space and does not resize when the Grid Splitter is moved up or down.


<Page
    x:Class="CSA2.Views.SearchUserPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CSA2.Views"
    xmlns:vm="using:CSA2.ViewModels"
    xmlns:controls="using:CSA2.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:telerik="using:Telerik.UI.Xaml.Controls"
    xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"
    xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"
    xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"
    xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
    mc:Ignorable="d">
    <Page.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="ColumnHeaderCompleteTemplate">
                <FontIcon
                    Margin="0,3,0,0"
                    FontSize="16"
                    Glyph="&#xE73E;" />
            </DataTemplate>
        </ResourceDictionary>
    </Page.Resources>
    <Grid  x:Name="ContentArea" Margin="{StaticResource SmallTopBottomMargin}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Margin="0 5 0 5">
            <TextBlock x:Uid="SearchUser" Style="{ThemeResource SubtitleTextBlockStyle}"/>
            <Border BorderThickness=".5" BorderBrush="LightGray" CornerRadius="2">
                <Grid Margin="0 5 0 5">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <StackPanel>
                        <Grid HorizontalAlignment="Left">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock x:Uid="UserNameText"
                                       Grid.Row="0"
                                       Grid.Column="0"
                                       VerticalAlignment="Center"
                                       Margin="5 0 5 0"/>
                            <TextBox x:Uid="UserNameNullText"
                                     Grid.Row="0"
                                     Grid.Column="1"
                                     Margin="0 0 5 0"
                                     Width="200"
                                     Text="{x:Bind ViewModel.UserName, Mode=TwoWay}"/>
                            <TextBlock Grid.Row="0" x:Uid="UserEmailText"
                                       Grid.Column="2"
                                       VerticalAlignment="Center"
                                       Margin="0 0 5 0"/>
                            <TextBox x:Uid="UserEmailNullText"
                                     Grid.Row="0"
                                     Grid.Column="3"
                                     Width="200"
                                     Text="{x:Bind ViewModel.UserEmail, Mode= TwoWay}"/>
                            <TextBlock x:Uid="UserRoleText"
                                       Grid.Row="0"
                                       Grid.Column="4"
                                       VerticalAlignment="Center"
                                       Margin="5 0 5 0"/>
                            <Button Grid.Row="0"
                                    Grid.Column="5"
                                    Margin="0 0 0 0" HorizontalAlignment="Stretch">
                                <StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Select"
                                                   Margin="0 0 10 0" />
                                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE70D;"/>
                                    </StackPanel>
                                </StackPanel>
                                <Button.Flyout>
                                    <Flyout Placement="Bottom">
                                        <StackPanel Orientation="Vertical">
                                            <ListView x:Name="UserRoles" ItemsSource="{x:Bind ViewModel.UserRoles, Mode=OneWay}"
                                                      SelectionMode="Multiple"
                                                      VerticalContentAlignment="Top"
                                                      ScrollViewer.IsVerticalRailEnabled="True"
                                                      ScrollViewer.VerticalScrollBarVisibility="Visible">
                                                <i:Interaction.Behaviors>
                                                    <ic:EventTriggerBehavior EventName="SelectionChanged">
                                                        <ic:InvokeCommandAction
                                                            Command="{x:Bind ViewModel.SelectedItemsCommand}"
                                                            CommandParameter="{x:Bind UserRoles.SelectedItems,Mode=OneWay}"/>
                                                    </ic:EventTriggerBehavior>
                                                </i:Interaction.Behaviors>
                                            </ListView>
                                        </StackPanel>
                                    </Flyout>
                                </Button.Flyout>
                            </Button>
                            <TextBlock x:Uid="UserDepartmentText"
                                       Grid.Row="0"
                                       Grid.Column="6"
                                       VerticalAlignment="Center"
                                       Margin="5 0 5 0"/>
                            <Button Grid.Row="0"
                                    Grid.Column="7"
                                    Margin="0 0 0 0" HorizontalAlignment="Stretch">
                                <StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Select"
                                                   Margin="0 0 10 0" />
                                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE70D;"/>
                                    </StackPanel>
                                </StackPanel>
                                <Button.Flyout>
                                    <Flyout Placement="Bottom">
                                        <StackPanel Orientation="Vertical">
                                            <ListView x:Name="UserDepartments" ItemsSource="{x:Bind ViewModel.UserDepartments, Mode=OneWay}"
                                                      SelectionMode="Multiple"
                                                      VerticalContentAlignment="Top"
                                                      ScrollViewer.IsVerticalRailEnabled="True"
                                                      ScrollViewer.VerticalScrollBarVisibility="Visible">
                                                <i:Interaction.Behaviors>
                                                    <ic:EventTriggerBehavior EventName="SelectionChanged">
                                                        <ic:InvokeCommandAction
                                                            Command="{x:Bind ViewModel.SelectedItemsCommand}"
                                                            CommandParameter="{x:Bind UserDepartments.SelectedItems,Mode=OneWay}"/>
                                                    </ic:EventTriggerBehavior>
                                                </i:Interaction.Behaviors>
                                            </ListView>
                                        </StackPanel>
                                    </Flyout>
                                </Button.Flyout>
                            </Button>
                            <TextBlock x:Uid="UserFunctionsText"
                                       Grid.Row="0"
                                       Grid.Column="8"
                                       VerticalAlignment="Center"
                                       Margin="5 0 5 0"/>
                            <Button Grid.Row="0"
                                    Grid.Column="9"
                                    Margin="0 0 0 0" HorizontalAlignment="Stretch">
                                <StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Select"
                                                   Margin="0 0 10 0" />
                                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE70D;"/>
                                    </StackPanel>
                                </StackPanel>
                                <Button.Flyout>
                                    <Flyout Placement="Bottom">
                                        <StackPanel Orientation="Vertical">
                                            <ListView x:Name="UserFunctions" ItemsSource="{x:Bind ViewModel.UserFunctions, Mode=OneWay}"
                                                      SelectionMode="Multiple"
                                                      VerticalContentAlignment="Top"
                                                      ScrollViewer.IsVerticalRailEnabled="True"
                                                      ScrollViewer.VerticalScrollBarVisibility="Visible">
                                                <i:Interaction.Behaviors>
                                                    <ic:EventTriggerBehavior EventName="SelectionChanged">
                                                        <ic:InvokeCommandAction
                                                            Command="{x:Bind ViewModel.SelectedItemsCommand}"
                                                            CommandParameter="{x:Bind UserFunctions.SelectedItems,Mode=OneWay}"/>
                                                    </ic:EventTriggerBehavior>
                                                </i:Interaction.Behaviors>
                                            </ListView>
                                        </StackPanel>
                                    </Flyout>
                                </Button.Flyout>
                            </Button>
                            <Button Grid.Row="0"
                                    Grid.Column="10"
                                    Margin="5 0 0 0"
                                    Command="{x:Bind ViewModel.SearchCommand}">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock x:Uid="SearchButtonText"
                                               Margin="0 0 10 0" />
                                    <SymbolIcon Symbol="Zoom"/>
                                </StackPanel>
                            </Button>
                            <Button Grid.Row="1"
                                    Grid.Column="9"
                                    Command="{x:Bind ViewModel.AddUserCommand}">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock x:Uid="CreateNewButtonText" Margin="0 0 20 0"/>
                                    <SymbolIcon Symbol="AddFriend"/>
                                </StackPanel>
                            </Button>
                            <Button Grid.Row="1"
                                    Grid.Column="10"
                                    Margin="5 0 0 0"
                                    Command="{x:Bind ViewModel.ClearCommand}">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock x:Uid="ClearButtonText" Margin="0 0 20 0"/>
                                    <SymbolIcon Symbol="Refresh"/>
                                </StackPanel>
                            </Button>
                        </Grid>
                    </StackPanel>
                </Grid>
            </Border>
        </StackPanel>
        <Grid Grid.Row="1" Margin="0 5 0 5">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="10"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <telerikGrid:RadDataGrid x:Name="UserGrid"
                                     MinHeight="150"
                                     ItemsSource="{x:Bind ViewModel.Source}"
                                     AutoGenerateColumns="False"
                                     RowHeight="25"
                                     SelectionMode="Multiple"
                                     SelectionUnit="Row"
                                     UserGroupMode="Disabled">
                <i:Interaction.Behaviors>
                    <ic:EventTriggerBehavior EventName="SelectionChanged">
                        <ic:InvokeCommandAction
                            Command="{x:Bind ViewModel.SelectedUsersCommand}"
                            CommandParameter="{x:Bind UserGrid.SelectedItems,Mode=OneWay}"/>
                    </ic:EventTriggerBehavior>
                </i:Interaction.Behaviors>
                <telerikGrid:RadDataGrid.Columns>
                    <telerikGrid:DataGridTemplateColumn SizeMode="Fixed" Width="20">
                        <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                            <DataTemplate>
                                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <CheckBox/>
                                </StackPanel>
                            </DataTemplate>
                        </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                    </telerikGrid:DataGridTemplateColumn>
                    <telerikGrid:DataGridTextColumn SizeMode="Auto"  PropertyName="UserName" Header="Name"/>
                    <telerikGrid:DataGridTextColumn SizeMode="Auto"  PropertyName="UserEmail" Header="Email"/>
                    <telerikGrid:DataGridTextColumn SizeMode="Auto"  PropertyName="DepartmentName" Header="Department"/>
                    <telerikGrid:DataGridBooleanColumn SizeMode="Auto" PropertyName="UserActiveIndicator" Header="User Status" />
                    <telerikGrid:DataGridDateColumn SizeMode="Auto" PropertyName="RecordCreated" Header="Date Created" CellContentFormat="{}{0:d}"/>
                    <telerikGrid:DataGridDateColumn SizeMode="Auto" PropertyName="RecordModified" Header="Date Modified" CellContentFormat="{}{0:d}"/>
                </telerikGrid:RadDataGrid.Columns>
            </telerikGrid:RadDataGrid>
            <telerikPrimitives:RadGridSplitter Grid.Row="1"
                                               ResizeBehavior="BasedOnAlignment"
                                               ResizeDirection="Rows"
                                               HorizontalAlignment="Stretch">
                <telerikPrimitives:RadGridSplitter.Element>
                    <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE76F;" FontSize="10"/>
                </telerikPrimitives:RadGridSplitter.Element>
            </telerikPrimitives:RadGridSplitter>
            <Grid Grid.Row="2" Margin="0 2 0 0">
                <telerik:RadTabControl>
                    <telerik:RadTabControl.Items>
                        <telerik:RadTabItem Header="User Details">
                            <telerik:RadTabItem.Content>
                                <controls:AddEditControl x:Name="AddEditControl" DataContext="{x:Bind ViewModel.UserDetailsViewModel}" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                        <telerik:RadTabItem Header="Tab 2" Content="The content of tab item 2"/>
                        <telerik:RadTabItem Header="Tab 3" Content="The content of tab item 3"/>
                        <telerik:RadTabItem Header="Tab 4" Content="The content of tab item 4"/>
                    </telerik:RadTabControl.Items>
                </telerik:RadTabControl>
            </Grid>
        </Grid>
    </Grid>
</Page>

 
Masha
Telerik team
 answered on 26 Sep 2022
1 answer
9 views

Hi,

We are using controls from Telerik UI for WinUI in our project. There is sales invoice report and generated PDF file of that report. We would like to show print dialog after processing the sales invoice. For this purpose we are using WinUI PdfViewer (RadPdfViewer control). The RadPdfViewer control shows content of PDF file, we are not able to print.

RadPdfViewer has Print() method. When we set DocumentSource as PDF file and call Print() method, should it show print dialog? See attached sample project, run and click "Print report" button. Nothing happen, but my expectation is showing print dialog. Any idea/solution to print pdf file?   

Kalin
Telerik team
 answered on 23 Sep 2022
1 answer
3 views

When clicking button inside the DataGrid row the command doesn't get executed in the ViewModel.

Both Page and ViewModel are created by the DI container so I need to be able to pass the POCO object of the row where the button is clicked to the ViewModel.

 <telerikGrid:RadDataGrid DataContext="{x:Bind ViewModel}" ItemsSource="{x:Bind ViewModel.Source}" AutoGenerateColumns="False">
                            <telerikGrid:RadDataGrid.Columns>
                                <telerikGrid:DataGridTextColumn PropertyName="UserName" Header="User Name"/>
                                <telerikGrid:DataGridTextColumn PropertyName="UserEmail" Header="User Email"/>
                                <telerikGrid:DataGridBooleanColumn PropertyName="UserActiveIndicator" Header="User Status" />
                                <telerikGrid:DataGridDateColumn PropertyName="RecordCreated" Header="Date Created"/>
                                <telerikGrid:DataGridDateColumn PropertyName="RecordModified" Header="Date Modified"/>
                                <telerikGrid:DataGridTemplateColumn Header="Edit" Width="81">
                                    <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                                        <DataTemplate x:DataType="vm:SearchUserViewModel">
                                            <Button x:Name="editButton" Command="{x:Bind  EditUserCommand}" CommandParameter="{Binding }">
                                                <SymbolIcon Symbol="Edit"/>
                                            </Button>
                                        </DataTemplate>
                                    </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                                </telerikGrid:DataGridTemplateColumn>
                            </telerikGrid:RadDataGrid.Columns>
                        </telerikGrid:RadDataGrid>


Vladimir Stoyanov
Telerik team
 answered on 19 Sep 2022
0 answers
25 views

Hi

I am using the Datagrid with Data Virtualization and I need to implement server side filtering.

So I added the "FilterRequested" command to get the information on how the user wants to filter. I then persist the filters in my viewmodel, clear all data in the datagrids itemsource, send a request to the server and refill the itemsource with the first <batchsize> of the filtered rows.  All following requests to the server (e.g.. throug scolling) will use the persisted filter values (and I do the same for sorting). This kind of works so far.

My Problem: I have a column that represents a state in form of an enum. Out of the box I can only filter for distinct states that are in the grid right now, but there are potentially more states in rows that have not been loaded yet. Is there a way to override the distinct filter options with static ones (in my case all enum values)? Even if there is an override, it is probably not possible to figure out which values were selected, because the DistinctValuesFilterDescriptor that is delivered via the FilterRequestContext of the command just gives me all elements that would be left after the filter, not the values selected.

kind regards
Dominik

Dominik
Top achievements
Rank 1
 asked on 29 Jul 2022
1 answer
31 views
Hi,

On the video, you see the WinUI and UWP versions of the same implementation. I use expando to set the ItemsSource.

Differences:
1- Header has a mouse over state on WinUI. What is the trick to not have this?

2- In my DescriptionControl.xaml, the control has an hard coded value of Height=192. WinUI grid ignores this value. However, setting the RowHeight in the RadDataGrid does the job. Is it a bug/regression/new expectation?

3- For each timestamp (TimestampColumn), the SizeMode is Auto. In WinUI, my columns are much larger than UWP version.

4- Surely super easy, how to change the foreground and background color of the header column? Background and Foreground don't exist on DataGridTypedColumn. The default output of UWP is nicer.

Thank you!
Vicky
Telerik team
 answered on 15 Jul 2022
1 answer
34 views

I was noticing that there is not a  VS Extensions for 2022 for the product set WinUI 2.X in my Progress folders.  And I'm not sure what this means.  

As you can see I have the templates for WinUI.  What am I missing?

Sincerely,
Keith Nicholson

Nikola
Telerik team
 answered on 13 Jul 2022
1 answer
20 views
Hi,

Load the sample app, it generates: Error HRESULT E_FAIL has been returned from a call to a COM component.

I have the same in a UWP app and it works perfectly.

<grid:RadDataGrid
            x:Name="DataGrid"
            Grid.Row="1"
            AutoGenerateColumns="True"
            Background="#f0f0f0"
            BorderThickness="0"
            FrozenColumnCount="4"
            GridLinesThickness="1"
            GridLinesVisibility="Horizontal"
            Margin="0,16,0,0"
            SelectionMode="None"
            UserColumnReorderMode="None"
            UserFilterMode="Disabled"
            UserGroupMode="Disabled">
            <grid:RadDataGrid.Commands>
                <powerNumbers:PowerNumbersAutoGenerateCommand />
            </grid:RadDataGrid.Commands>
        </grid:RadDataGrid>
Lance | Manager Technical Support
Telerik team
 answered on 12 Jul 2022
2 answers
47 views

This works:

<Window
    x:Class="xxxxxx"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="using:Telerik.UI.Xaml.Controls" 
    mc:Ignorable="d">
    <Grid>
        <TabView>
            <TabView.TabItems>
                <TabViewItem Header="CMD Prompt"/>
                <TabViewItem Header="PowerShell"/>
                <TabViewItem Header="Windows Subsystem for Linux"/>
            </TabView.TabItems>
        </TabView>
    </Grid>
</Window>


This does not due to the following. Using all of the latest nuget packages (2.0). I suspect it is related to being in a Window vs a control:

Microsoft.UI.Xaml.Markup.XamlParseException
  HResult=0x802B000A
  Message=XAML parsing failed.
  Source=WinRT.Runtime
  StackTrace:
   at WinRT.ExceptionHelpers.<ThrowExceptionForHR>g__Throw|20_0(Int32 hr)

<Window
    x:Class="xxxxxx"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="using:Telerik.UI.Xaml.Controls" 
    mc:Ignorable="d">
    <Grid>
        <telerik:RadTabControl>
            <telerik:RadTabControl.Items>
                <telerik:RadTabItem Header="Tab 1" Content="The content of tab item 1"/>
                <telerik:RadTabItem Header="Tab 2" Content="The content of tab item 2"/>
                <telerik:RadTabItem Header="Tab 3" Content="The content of tab item 3"/>
                <telerik:RadTabItem Header="Tab 4" Content="The content of tab item 4"/>
            </telerik:RadTabControl.Items>
        </telerik:RadTabControl>
    </Grid>
</Window>

Alan
Top achievements
Rank 1
Iron
 answered on 18 May 2022
0 answers
74 views

Error NU1202 Package Telerik.WinUI.Controls 1.2.0 is not compatible with net6.0 (.NETCoreApp,Version=v6.0). Package Telerik.WinUI.Controls 1.2.0 supports:
  - net5.0-windows10.0.19041 (.NETCoreApp,Version=v5.0)
  - uap10.0 (UAP,Version=v10.0)

 

Is the above true? I am using 1.2 via nuget. Is that correct?

Alan
Top achievements
Rank 1
Iron
 asked on 29 Apr 2022
1 answer
37 views

So I was looking at the bits and I see three different sets of Binaries for the WinUI set.  What is the difference?

Sincerely,

Keith

Dilyan Traykov
Telerik team
 answered on 29 Apr 2022
Top users last month
Chris
Top achievements
Rank 2
Iron
Johnny
Top achievements
Rank 1
Iron
Iron
Iron
Hakob
Top achievements
Rank 2
Iron
Simos Sigma
Top achievements
Rank 2
Iron
Iron
Iron
lahiru
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?