Telerik Forums
UI for WPF Forum
0 answers
28 views

Hello everyone,

 

in my application I have 2 different usercontrol. In first ine I have a RadTileView, In the other usercontrol I have a simple list of element present in the first usercontrol (with a dedicated button) and i want to open the radtile view element by click on the button.

Through this code


 var container = radTileElement.ItemContainerGenerator.ContainerFromItem(item) as RadTileViewItem;

 if (container != null)
 {
    container.TileState = TileViewItemState.Maximized;                 
 }

i can open the Tile view from the other usercontrol, but only if all element of RadTileView are in Minimized state. If a tile view element in the RaTileView is Maximized this call

 


radTileElement.ItemContainerGenerator.ContainerFromItem(item) as RadTileViewItem;

 return null.

 

Any suggestions?

 

Thank you

Marco
Top achievements
Rank 1
 asked on 31 Oct 2023
1 answer
39 views

Hello, 

I'm searching how to prevent a RadTileViewItem to automatically resize when switching to a different RadTabItem.

In our WPF application, we use the RadTabControl. The RadTabItems are dinamically created from user input. In a particular RadTabItem, I've include a RadTileView that is populated dinamically from ItemsSource.

The ContentChangeMode is set to Manual and I have a method managing it. It works well.

My problem is that when I maximize one item, its content switch to an editable control. The RadTileView is in a TabItem, so the user could click on an other Tab. When this occurs, all RadTileViewItems are refresh and them states are set to Restored. The RadTileViewItem I previously set to maximized is now Restored but his content is always linke to the "editable control".

My wish is to prevent this. The first solution possible is to block the MaximizedItem to set Restore state. Or second, when switching to Restore, force to set his state to NormalContent. These 2 solutions are OK for me.

 

Could someone help me or has an example of this?

Sorry if the question had already been posted, I didn't found someting.

And sorry for my poor english ;-)

 

Best regards

Dinko
Telerik team
 answered on 31 Aug 2023
1 answer
184 views

Hi Team,

We want to show the battery status for laptop users in our application designed using Telerik in MVVM pattern using PRISM framework. We want to show the ICON with gauge showing current status of Battery very similar to thermometer design present in Telerik sample application. 

We are able to design the Battery similar to mobile application using Viewbox and Borders in WPF. We are not able to implement it in the Telerik RadVerticalLinearScale Custom Items. We want to define the battery status with 3 ranges in which one will be red indicating action required, one will be yellow representing warning and one will be green indicating normal state. Kindly help us design it using RadVerticalLinearGauge. 

Below is the code we tried but it is not working. If you have any other way then please help we also tried like thermometer code but we are not able to design the battery as shown in image.

<telerik:RadVerticalLinearGauge Grid.Row="3" Grid.Column="0" Grid.RowSpan="4"><br>                            <telerik:VerticalLinearScale Min="0" Max="100" MajorTicks="4" RangeLocation="Inside" IsInteractive="True"><br>                                <telerik:VerticalLinearScale.Ranges><br>                                    <telerik:GaugeRange Background="#FFE50000" Min="0" Max="20" IndicatorBackground="#FFE50000" StartWidth="0.05" EndWidth="0.05"/><br>                                    <telerik:GaugeRange Background="#FFFFFF00" Min="20" Max="30" IndicatorBackground="#FFFFFF00" StartWidth="0.05" EndWidth="0.05"/><br>                                    <telerik:GaugeRange Background="#FF32CD32" Min="30" Max="100" IndicatorBackground="#FF32CD32" StartWidth="0.05" EndWidth="0.05"/><br>                                </telerik:VerticalLinearScale.Ranges><br>                                <telerik:VerticalLinearScale.Indicators><br>                                    <telerik:BarIndicator UseRangeColor="True"<br>                                                        RangeColorMode="MixedColor" <br>                                                        Value="35" /><br>                                </telerik:VerticalLinearScale.Indicators><br>                                <telerik:VerticalLinearScale.Template><br>                                    <ControlTemplate><br>                                        <Viewbox Width="80" Height="150"><br>                                            <StackPanel Orientation="Vertical"><br>                                                <Border Background="#00c000" CornerRadius="2,2,0,0" Padding="2" Width="20" Height="7" Margin="0,-2,0,-2"/><br>                                                <Border BorderBrush="#00c000" BorderThickness="2" CornerRadius="5" Padding="2" Width="50" Height="100"><br>                                                    <Grid><br>                                                        <Grid.RowDefinitions><br>                                                            <RowDefinition /><br>                                                            <RowDefinition Height="Auto" /><br>                                                        </Grid.RowDefinitions><br>                                                        <Border Height="75" Grid.Row="1" Background="#00c000" CornerRadius="2" Padding="2" /><br>                                                    </Grid><br>                                                </Border><br>                                            </StackPanel><br>                                        </Viewbox><br>                                    </ControlTemplate><br>                                </telerik:VerticalLinearScale.Template><br>                            </telerik:VerticalLinearScale><br>                        </telerik:RadVerticalLinearGauge>

 

Hi Martin,
Thanks for the code sample tried to implement the way you have shown but it does not look like the expected design shared in the sample image. We have Windows application which we have designed using telerik control and was able to achieve the same design using rad linear Gauge.  You can check below attached image for the same. We are migrating this application to WPF and we are not able to design this part. Can you look at windows control and helps us design the same way?
Or can we achieve the same thing using any other way like using path for designing the battery icon like you people had designed the thermometer? Kindly help.

 

Attaching changedbatterydesignonResize for reference.

Nilesh
Top achievements
Rank 1
Veteran
 updated question on 04 May 2021
1 answer
51 views
When I set the IsSelectionEnabled=true and SelectionMode=Single, the TileView still allows a user to select multiple RadTileViewItem(s) and displays a message box that says "Cannot begin a new selection while a selection is in progress".  I'm using the latest release, 2021.1.119.
Dinko | Tech Support Engineer
Telerik team
 answered on 08 Feb 2021
7 answers
148 views
Is there any way to have RadTileViewItems span more than one column or more than one row when in the restored state? If not would you consider this a feature request?

regards

// charlie
Martin Ivanov
Telerik team
 answered on 10 Sep 2020
0 answers
83 views

Dear Telerik support team,

I would to customize the style of TileViewItem in order make the content when maximizing overlap the other control (it doesn't take spaces of other controls in my screen when maximizing).

Would you please help to style it?

 

Below is my current xaml:

01.<telerik:RadTileView x:Name="TitleView"
02.                            RowHeight="{Binding HeightConcept, UpdateSourceTrigger=PropertyChanged}" ColumnWidth="{Binding WidthConcept, UpdateSourceTrigger=PropertyChanged}"
03.                            Width="{Binding MaximizedWidthConcept, UpdateSourceTrigger=PropertyChanged}"
04.                            MaxHeight="{Binding MaximizedHeightConcept, UpdateSourceTrigger=PropertyChanged}" MinimizedRowHeight="Auto"
05.                            MinHeight="0"
06.                            ColumnsCount="1" RowsCount="1"
07.                            MaximizeMode="ZeroOrOne"  ScrollViewer.CanContentScroll="False"
08.                            DragMode="{Binding ElementName=dragMode, Path=SelectedItem}" IsItemsSizeInPercentages="True"
09.                            PreservePositionWhenMaximized="True"
10.                            telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
11.                            telerik:TileViewPanel.IsRowsShrinkEnabled="False" telerik:TileViewPanel.IsSizeBoundToPosition="False"
12.                            HeaderStyle="{StaticResource TileItemHeaderStyle}"
13.                            ItemTemplate="{StaticResource HeaderCustomTemplate}"            
14.                            ItemsSource="{Binding Items}"
15.                            TileStateChanged ="TitleView_TileStateChanged"
16.                            Background="Transparent"
17.                            >
18.           <telerik:RadFluidContentControl x:Name="FluidControl" ContentChangeMode="Manual" State="Large"
19.                                           TransitionDuration="0:0:.1" Height="Auto" Background="Transparent">
20.               <telerik:RadFluidContentControl.Content>
21.                   <Grid></Grid>
22.               </telerik:RadFluidContentControl.Content>
23.               <telerik:RadFluidContentControl.LargeContent>
24.                       <telerik:RadMultiColumnComboBox x:Name="MultiColumCombo1" Width="{Binding SearchBoxWidth, UpdateSourceTrigger=PropertyChanged}"
25.                                                       MinWidth="0" MinHeight="0" VerticalAlignment="Top" HorizontalAlignment="Left"
26.                                                       DisplayMemberPath="{Binding GridItem.ThirdFullName}"
27.                                                       DropDownMinWidth="{Binding DropDownMinWidthConcept, UpdateSourceTrigger=PropertyChanged}"
28.                                                       DropDownMaxWidth="{Binding DropDownMaxWidthConcept, UpdateSourceTrigger=PropertyChanged}"
29.                                                       SearchMode="MatchAnyTerm"
30.                                                       SelectionMode="Multiple" AutoCompleteMode="Search"
31.                                                       SelectionBoxesVisibility="Visible"
32.                                                       SelectionBoxStyle="{StaticResource SelectionBoxCustomStyle}"
33.                                                       NullText="..."
34.                                                       DropDownPlacement="Bottom" FooterVisibility="Visible"
35.                                                       FooterContentTemplate="{StaticResource FooterCheckBoxTemplate}"
36.                                                       CloseDropDownAfterSelectionInput="True"
37.                                                       GotFocus="MultiColumCombo1_GotFocus">
38.                           <telerik:RadMultiColumnComboBox.ItemsSourceProvider>
39.                               <telerik:GridViewItemsSourceProvider x:Name="ItemsSourceProviderGrid1"
40.                                            ItemsSource="{Binding DataSource, Mode=TwoWay}"
41.                                            ShowColumnHeaders="True"
42.                                            RowIndicatorVisibility="Collapsed"
43.                                            AutoGenerateColumns="False"
44.                                            >
45.                               </telerik:GridViewItemsSourceProvider>
46.                           </telerik:RadMultiColumnComboBox.ItemsSourceProvider>
47.                       </telerik:RadMultiColumnComboBox>
48.               </telerik:RadFluidContentControl.LargeContent>
49.           </telerik:RadFluidContentControl>
50.       </telerik:RadTileView>
minh
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 26 Feb 2020
2 answers
51 views

Hi,

 

we are in the process of creating an app meant for touch input using the RadTileView. We have Selection enabled (Mode=Single) and bound the SelectedItem and the MaximizedItem to their corresponding properties. The SelectedItem gets maximized and its template applied. The template contains a text box and a button. The problem occurs when we try to select the textbox or click the button using touch. The SelectedItem gets deselected and is being minimized again, which makes it impossible to enter something into the textbox.

When using the mouse everythings working fine.  

 

Any advice on how to properly deal with touch input?

 

Regards Sebastian 

Sebastian
Top achievements
Rank 1
 answered on 19 Feb 2020
1 answer
71 views

Hi,

In my application, I am using SplineSeries in RadCartesianChart.

I am using CategoricalAxis as horizontal axis.

I want to use CategoricalAxis as vertical axis as well.

How can I achieve the same?

Dinko | Tech Support Engineer
Telerik team
 answered on 09 Jan 2020
1 answer
54 views

Hi,
I am using MultipleRowsAndColumnsPanel in my application. 
I am facing some issues with it:
1. Scrolling behaviour is not working
2. When I add new tile in the view, it is not visualized. when I restart the application, all the tiles are visible as expected.
when I call base.MeasureOverride(availableSize) and base.ArrangeOverride(finalSize) methods in my overriden methods, all the newly added tiles display at position 0.

expected behaviour:
1. scrolling behaviour should work on when tiles goes out of view.
2. newly added tile should display on the view at the next position(1st position after last tile view item).

(MultipleRowsAndColumnsPanel  is copied from https://github.com/telerik/xaml-sdk/tree/master/TileView/RestoredTilesToSpanMultipleRowsAndColumns)

Dinko | Tech Support Engineer
Telerik team
 answered on 08 Jan 2020
3 answers
150 views

Hello,

    I am trying to create view containing collection of items with with specified Row, RowSpan, Coulumn and ColumnSpan properties in RadTileView. So far I've created VM ParamsEditionViewModel containing observable collection of BindableProfileData, which wraps 

public class BindableProfileData : BindableBase
    {
        
        private ProfileItem _profileModel;
        private BindableDPDataItem _dataModel;
 
        public int Row
        {
            get { return _profileModel.DrawingSettings.Row; }
        }
 
        public int Column
        {
            get
            {
                return _profileModel.DrawingSettings.Column;
            }
        }
         
        public int RowSpan
        {
            get { return _profileModel.DrawingSettings.RowSpan; }
        }
 
         
 
        public int ColumnSpan
        {
            get { return _profileModel.DrawingSettings.ColumnSpan; }
        }
}

 

To make possible settings custom tiles size I used MultipleRowsAndColumnsPanel provided by You in one of RadGridView developers examples (link).

Whole view looks like this:

<Grid>
      <FrameworkElement.Resources>
            <DataTemplate x:Key="ItemTemplate" >
                <TextBlock Text="{Binding Name}" />
            </DataTemplate>
 
            <DataTemplate x:Key="ContentTemplate">
                <StackPanel>
                    <TextBlock Text="{Binding Row, StringFormat='Row: {0}'}"/>
                    <TextBlock Text="{Binding Column, StringFormat='Column: {0}'}"/>
                    <TextBlock Text="{Binding RowSpan, StringFormat='RowSpan: {0}'}"/>
                    <TextBlock Text="{Binding ColumnSpan, StringFormat='ColumnSpan: {0}'}"/>
                </StackPanel>
            </DataTemplate>
        </FrameworkElement.Resources>
        <Grid>
            <telerik:RadTileView x:Name="xTileView"
                             ItemTemplate="{StaticResource ItemTemplate}"
                             ContentTemplate="{StaticResource ContentTemplate}"
                             ItemsSource="{Binding SelectedCategory}"
                             IsAutoScrollingEnabled="True"
                             ColumnWidth="500"
                             RowHeight="300">
 
                <telerik:RadTileView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <controlls:MultipleRowsAndColumnsPanel RowsCount="4" ColumnsCount="3"/>
                    </ItemsPanelTemplate>
                </telerik:RadTileView.ItemsPanel>
                <telerik:RadTileView.ItemContainerStyle>
                    <Style TargetType="telerik:RadTileViewItem">
                        <Setter Property="controlls:TileViewAttachedProperties.Row" Value="{Binding Row}"/>
                        <Setter Property="controlls:TileViewAttachedProperties.Column" Value="{Binding Column}"/>
                        <Setter Property="controlls:TileViewAttachedProperties.RowSpan" Value="{Binding RowSpan}"/>
                        <Setter Property="controlls:TileViewAttachedProperties.ColumnSpan" Value="{Binding ColumnSpan}"/>
                    </Style>
                </telerik:RadTileView.ItemContainerStyle>
            </telerik:RadTileView>
        </Grid>
    </Grid>

 

The problem is that the view don't appears when I load collection to VM after button click. When I remove this block 

<telerik:RadTileView.ItemsPanel>
        <ItemsPanelTemplate>
             <controlls:MultipleRowsAndColumnsPanel RowsCount="4" ColumnsCount="3"/>
        </ItemsPanelTemplate>
</telerik:RadTileView.ItemsPanel>

The view appears but of course not if a expected format. When I paste ItemsPanel block when app is running with (Edit and Continue mode in VS), view looks just how it should be. So I have two questions. How to fix this issue and second how can I uprgrade view to load different data templates if VM observable collection contains different objects inheritating from base BindableProfileData.

Dinko | Tech Support Engineer
Telerik team
 answered on 08 Jan 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?