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
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
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.
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
>
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
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?
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)
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.