Dear Tlerik team,
Can you see the picture and help me to style it.
1. First and Last items need to not have any background, border, action button for maximize/minimize, can not click to change their status, width depend from the controls in them not from other items. By this way i want to keep this space around tile items for me to put what other control i need - images, dropdown, buttons... etc... of course item in center need to autosize to catch whole width space.
For me not have a difference if they are not first or last items but have a ContentControl in the begin and end of the minimized items but large item still to catch whole width.
The visual effect will be same: second picture
Of course aligned in first row.
2. Need to change height to all items. they are too big now.
3. The empty space between items is too much. How i can change it? Same is between minimized items and large.
4. I need a icon from of the item title.
5. Status normal need to be disable. Items can be only minimized with one maximized. I need they to not go in normal mode.
6. Thank you in advance :)
Can you see the picture and help me to style it.
1. First and Last items need to not have any background, border, action button for maximize/minimize, can not click to change their status, width depend from the controls in them not from other items. By this way i want to keep this space around tile items for me to put what other control i need - images, dropdown, buttons... etc... of course item in center need to autosize to catch whole width space.
For me not have a difference if they are not first or last items but have a ContentControl in the begin and end of the minimized items but large item still to catch whole width.
The visual effect will be same: second picture
Of course aligned in first row.
2. Need to change height to all items. they are too big now.
3. The empty space between items is too much. How i can change it? Same is between minimized items and large.
4. I need a icon from of the item title.
5. Status normal need to be disable. Items can be only minimized with one maximized. I need they to not go in normal mode.
6. Thank you in advance :)
4 Answers, 1 is accepted
0
Accepted
Hello Saykor,
From your snapshots I noticed that you've applied a theme or a custom style on the RadTileView control. However as I'm not sure if you're using the Vista theme or a custom style, I prepared a sample solution where the default style settings of the RadTileView are used. And based on them I've customized the control and its tiles to implement the required changed. I'll describe my steps in the order in which you listed your requirements:
1. First and Last items need to not have any background, border, action button for maximize/minimize, can not click to change their status, width depend from the controls in them not from other items - In order to make the background of the tiles transparent, I set the Background property to Transparent and the BorderThickness to 0. However, if you've used a theme/custom style, you may need to edit the entire style of the RadTileViewItems to remove all borders/backgrounds.
I also applied a custom TileViewItemHeader Style where I defined only a ContentPresenter to display the header of the tiles - all other elements of the default template of the TileViewItemHeader are removed. Please note that the MinHeight property of the ContentPresenter is set in order to stretch the header onto the entire minimized height of the tile. You'll only need this setting if you don't want to display the content of the first/last tiles while they are minimized.
And I set the RadTileView.MinimizedColumnWidth property to Auto in order to let the tiles define their width based on their content.
2. Need to change height to all items. they are too big now. - You can set the MinimizedHeight property to better fit your requirements. In my sample I made it big enough to display only the Header part of the tiles in minimized state.
3. The empty space between items is too much. How i can change it? Same is between minimized items and large - The RadTileViewItems have a predefined Padding of 7px, which controls the space between the tiles. If you decrease this value, you'll decrease the space left between the tiles. I set it to 3px in my solution.
4. I need a icon from of the item title - The RadTileViewItems don't expose an Icon/Image property but you can customize their content to include an image as well.
5. Status normal need to be disable. Items can be only minimized with one maximized. I need they to not go in normal mode - You can set the RadTileView.MaximizeMode to One to make sure that one tile is maximized at all times. This way all tiles will be either maximized or minimized and they won't go into a restored state.
I hope the solution will put you on the right track.
Greetings,
Tina Stancheva
the Telerik team
From your snapshots I noticed that you've applied a theme or a custom style on the RadTileView control. However as I'm not sure if you're using the Vista theme or a custom style, I prepared a sample solution where the default style settings of the RadTileView are used. And based on them I've customized the control and its tiles to implement the required changed. I'll describe my steps in the order in which you listed your requirements:
1. First and Last items need to not have any background, border, action button for maximize/minimize, can not click to change their status, width depend from the controls in them not from other items - In order to make the background of the tiles transparent, I set the Background property to Transparent and the BorderThickness to 0. However, if you've used a theme/custom style, you may need to edit the entire style of the RadTileViewItems to remove all borders/backgrounds.
I also applied a custom TileViewItemHeader Style where I defined only a ContentPresenter to display the header of the tiles - all other elements of the default template of the TileViewItemHeader are removed. Please note that the MinHeight property of the ContentPresenter is set in order to stretch the header onto the entire minimized height of the tile. You'll only need this setting if you don't want to display the content of the first/last tiles while they are minimized.
And I set the RadTileView.MinimizedColumnWidth property to Auto in order to let the tiles define their width based on their content.
2. Need to change height to all items. they are too big now. - You can set the MinimizedHeight property to better fit your requirements. In my sample I made it big enough to display only the Header part of the tiles in minimized state.
3. The empty space between items is too much. How i can change it? Same is between minimized items and large - The RadTileViewItems have a predefined Padding of 7px, which controls the space between the tiles. If you decrease this value, you'll decrease the space left between the tiles. I set it to 3px in my solution.
4. I need a icon from of the item title - The RadTileViewItems don't expose an Icon/Image property but you can customize their content to include an image as well.
5. Status normal need to be disable. Items can be only minimized with one maximized. I need they to not go in normal mode - You can set the RadTileView.MaximizeMode to One to make sure that one tile is maximized at all times. This way all tiles will be either maximized or minimized and they won't go into a restored state.
I hope the solution will put you on the right track.
Greetings,
Tina Stancheva
the Telerik team
Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.
0
Saykor
Top achievements
Rank 2
Rank 2
answered on 17 Sep 2012, 01:25 PM
Hi,
This is exactly what i want with a little difference. To use MinimizedHeight is not good. Please see the picture when i change it from 38 ( you set it to ) to 25 what is the result. And top tile is not with new height too.
We change theme to BureauBlue
Best regards,
Saykor
This is exactly what i want with a little difference. To use MinimizedHeight is not good. Please see the picture when i change it from 38 ( you set it to ) to 25 what is the result. And top tile is not with new height too.
We change theme to BureauBlue
Best regards,
Saykor
0
Saykor
Top achievements
Rank 2
Rank 2
answered on 17 Sep 2012, 06:36 PM
It is possible tile items that is active ( without first and last ) to be stretched and fill whole available space?
Here is what happen when I use MinimizedWidth
<telerik:RadTileView MinimizedColumnWidth="*">
First Item is set to 200, last is set to 100
As you see MinimizedColumnWidth="*" not catch whole space for other items that not have a MinimizedWidth value
Thanks
Here is what happen when I use MinimizedWidth
<telerik:RadTileView MinimizedColumnWidth="*">
First Item is set to 200, last is set to 100
As you see MinimizedColumnWidth="*" not catch whole space for other items that not have a MinimizedWidth value
Thanks
0
Accepted
Hello Saykor,
If you'd like to see only the header of the TileViewItems in minimized state, then there are only two approaches - the first one is through the MinimizedHeight property, the other one is by editing the ControlTemplate of he tiles to remove their content when they are minimized. I used the first approach in my sample application and this is why I have carefully chosen the value of the MinimizedHeight property - to reflect my application layout and the RadTileViewItems default height. And this is why when you change that value, the header will be cut off. And if you don't want to set a static MinimizedHeight value to the RadTileViewItems, you can try editing their templates. And this is only in case you want to display only the header part of the minimized tiles, so please let me know if your goal is different.
As for the width of the minimized tiles, at the moment when you set a value to the MinimizedColumnWidth property, the TileView calculates the width of each column in the minimized area. Then if you apply a MinimizedWidth on some of the tiles, when they are minimized, their Width will reflect the MinimizedWidth value, however, the column in which the tile is displayed won't change its size. This is why in your case, when you set the MinimizedColumnWidth to *, the minimized area columns are sized to take all available area - including the first and the last columns where you display the tiles with predefined MinimizedWidth. This basically means that the RadTileView.MinimizedColumnWidth and RadTileViewItem.MinimizedWidth properties control two separate sizes and the star column sizing as the MinimizedColumnWidth value won't be affected by the MinimizedWidth of the first and the last tiles.
Kind regards,
Tina Stancheva
the Telerik team
If you'd like to see only the header of the TileViewItems in minimized state, then there are only two approaches - the first one is through the MinimizedHeight property, the other one is by editing the ControlTemplate of he tiles to remove their content when they are minimized. I used the first approach in my sample application and this is why I have carefully chosen the value of the MinimizedHeight property - to reflect my application layout and the RadTileViewItems default height. And this is why when you change that value, the header will be cut off. And if you don't want to set a static MinimizedHeight value to the RadTileViewItems, you can try editing their templates. And this is only in case you want to display only the header part of the minimized tiles, so please let me know if your goal is different.
As for the width of the minimized tiles, at the moment when you set a value to the MinimizedColumnWidth property, the TileView calculates the width of each column in the minimized area. Then if you apply a MinimizedWidth on some of the tiles, when they are minimized, their Width will reflect the MinimizedWidth value, however, the column in which the tile is displayed won't change its size. This is why in your case, when you set the MinimizedColumnWidth to *, the minimized area columns are sized to take all available area - including the first and the last columns where you display the tiles with predefined MinimizedWidth. This basically means that the RadTileView.MinimizedColumnWidth and RadTileViewItem.MinimizedWidth properties control two separate sizes and the star column sizing as the MinimizedColumnWidth value won't be affected by the MinimizedWidth of the first and the last tiles.
Kind regards,
Tina Stancheva
the Telerik team
Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.