Custom Window

[heavywoody]

I don't know if it is possible, but I am trying to make a custom window that looks like the image attached.  I am troubled by how to make the tab and the look to it. The window title would be on the top left tab looking piece. Any help would be appreciated.

[Masha]

Hi Christian,

Yes, you can create custom window like the image you provided. In the attached project I've demonstrated a sample how you could achieve this. Although you need to make some modifications to make it look prettier.
I hope it helps.

All the best,
Maria
the Telerik team

[heavywoody]

Thank you so much!   Can I ask, how did  you write that?  Or were you able to just template the window?  I am unsure of how to create that style in case I want to do the same.  Expression Blend?

[Masha]

Hello Christian,

I recommend using Implicit Styles for themes customization.I've used this approach in the project I've sent to you. This way you can easily apply modifications on RadWindow, based on the default style. You can read more about implicit styles in our online documentation.

You can get the style of RadWindow  for ExpresstionDark theme from your RadControls installation folder. You will find there a Themes.Implicit folder, which contains resources for all themes. RadWindow styles Template is part of Telerik.Windows.Controls.Navigation.xaml file.

Another way is to use Expression Blend to generate all necessary templates and resources for RadWindowStyle.

I hope it helps.

All the best,
Maria
the Telerik team

[heavywoody]

Do you mind one ore question? I took what you gave me and used it and it is good.   I needed to also add a true slider control next to the Min, Max, and Close buttons.  However, what I run into is that when I go and click the slider control to move the slider, the program behaves as if I want to move the window.   I do want the ability to move the window around when I am not clicking on the slider, but if I click the slider, than any movement should be the slider moving up and down.  The Slider is just associated with the Opacity of the window.  Here is the line I added to the code you sent.

<StackPanel x:Name="HeaderButtons" Grid.Column="1" Orientation="Horizontal" Height="20" Margin="0 0 6 0" HorizontalAlignment="Right" Background="Black" >
                                        <telerik:RadSlider Name="PART_SliderControl" Width="100" Height="Auto" TickFrequency=".1" IsSnapToTickEnabled="True" IsMoveToPointEnabled="True" Background="Gray" Maximum="1.0" Minimum="0.0" LargeChange=".1" SmallChange=".1" Padding="5 0 5 0" HorizontalAlignment="Left" Margin="0,0,15,5">
                                        </telerik:RadSlider>
   

[Masha]

Hi Christian,

Simply put telerik:WindowHost.HitTestable="True" to your telerik:RadSlider definition and everything should work as expected.

I hope this will be helpful.

Kind regards,
Maria
the Telerik team

[heavywoody]

Hi,
I have done that.  Now I can click on the slider control, but I cannot move the window at all.  It seems to think I am always clicking the slider or grid that houses the slider.  I have put the control below.   I had another question on this if you don't mind. Is it possible to take what you have done here and apply it to a Pane in a Docking Control, so the window looks like what you have created?

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<telerik:RadSlider Name="PART_SliderControl" Grid.Column="0" Width="100" Height="Auto" TickFrequency=".1" Value=".7" IsSnapToTickEnabled="True" IsMoveToPointEnabled="True" Background="Gray" Maximum="1.0" Minimum="0.2" LargeChange=".1" SmallChange=".1" Padding="5 0 5 0" HorizontalAlignment="Left" Margin="15,0,15,5">
                                        </telerik:RadSlider>

<StackPanel x:Name="HeaderButtons" Grid.Column="1" Orientation="Horizontal" Height="20" Margin="0 0 6 0" HorizontalAlignment="Right" Background="Black" >

[Masha]

Hello Christian,

If you put RadSlider control inside StackPanel as in the code snippet below:

<StackPanel x:Name="HeaderButtons" Grid.Column="1" Orientation="Horizontal" Height="20" Margin="0 0 6 0" HorizontalAlignment="Right" Background="Black" >

    <StackPanel IsHitTestVisible="True"  Height="20">
        <telerik:RadSlider telerik:WindowHost.HitTestable="True" Name="PART_SliderControl" Width="100" Height="Auto" TickFrequency=".1" IsSnapToTickEnabled="True" IsMoveToPointEnabled="True" Background="Gray" Maximum="1.0" Minimum="0.0" LargeChange=".1" SmallChange=".1" Padding="5 0 5 0" HorizontalAlignment="Left" Margin="0 0 15 5" />
    </StackPanel>
...

everything should work fine. Please send me runnable sample if you still have problems with that.

Do you mean, in your second question, styling the ToolWindow inside RadDocking to look like the custom Window we have been created? Unfortunately you could  not use the same style. To achieve the desired scenario you should modify the control template of ToolWindowStyle. Modifications are similar to the RadWindows' control template styling I've created in my previous post.

I hope this helps.

Regards,
Maria
the Telerik team

[heavywoody]

Maria,
One more question if you don't mind.  Can you show me an example of how to do that with the ToolWindow?   What I have to do a little different is add the Min, Max buttons to the header.  So it essentially has to look just like the other you did.

Thanks!

[Yana]

Hello Christian,

Please note that providing custom solutions is out of scope of our service.  We've already prepared an example which demonstrates how to achieve the needed approach according to your requirements. As Maria explained,  the modifications that you need to make to the ControlTemplate of ToolWindowStyle are similar to the ones that you already have. Please try to implement this by yourself and if you experience any specific issues, write to us again.

Thank you for the understanding,

Regards,
Yana
the Telerik team

[heavywoody]

Understood. I did try to follow the directions of making a theme and it would not work, for whatever reason.  

[heavywoody]

Ok, I got it going now.  Thanks for your help.  

Can I ask one other question?  I now have the header looking like I want.  One of the buttons I put on the top next to Min and Max is a toggle button, which toggles the view of the window.   But I can't figure out how in a global style to allow functionality specific to that instance of the window when someone clicks a button at the top of the window?

[Vladi]

Hello Christian,

The built-in buttons in the Template of the control are using built-in commands that are executing their logic in the code of the control and this approach cannot be used for custom buttons added to the Template of the control. I would suggest you to create your custom commands in your ViewModel and execute their logic there. You can find more information about WPF commands here and here, note that this is a general approach in WPF and could be used for any WPF control.

All the best,
Vladi
the Telerik team