Wrap control in Grid

Question

Hello guys,

how do i wrap a control with a <Grid>, lets says its a contentControl and a <Grid> should be placed around it. The contentControl itself is one from a 3rd party provider so i cant just go change source code and place <Grid> tags before and after it (<Grid>contentControl</Grid>). I tried applying Style with the targetType="{x:Type contentControl}" and in Setter property="template" i added the <Grid> tags but it kinda didnt work well.

any help how to do this?

please

edited:  i am just using word "contentControl" to describe a custom control from a 3rd party controls provider (also its not microsoft standard control)

"what i means is i would like to create a style of a the 3rd party control and in the style the 3rd party control should be wrapped by a <Grid>.. also a <Style> with TargetType="3rd_party_control" and somewhere inside the style i have <ControlTemplate><Grid><style_of_3rd_party_control><Grid><ControlTemplate>

then wherever i use that 3rd party control i always have a grid behind it (or better said around it)

can somebody help me with it??? please"

Answer 1

Sorry cyb3r1st, your question is confusing.

 

If you mean how do you wrap a control in a grid, then yes that is exactly how you do it, ColumnDefinitions & RowDefinitions, Row, Column, RowSpan & Columnspan properties to define it's location.

If you mean how do you include a third party control into an application via XAML, then you need to refer to the xml name space for the control, and declare the namespace.

 

Both these principles are shown in the snippet below, where the third party control I am including is the WPF RibbonControl.

 

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" 
		xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon" 
		x:Class="WpfApplication28.MainWindow"
        Title="MainWindow" Height="350" Width="525">

	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition/>
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="0.137*"/>
			<RowDefinition Height="0.137*"/>
			<RowDefinition Height="0.726*"/>
		</Grid.RowDefinitions>
        
		<Custom:Ribbon Grid.Column="1" Grid.Row="1" />
        
	</Grid>
</Window>

 

I hope that helps.

Regards,
Pete

---

#PEJL

Answer 2

what i means is i would like to create a style of a the 3rd party control and in the style the 3rd party control should be wrapped by a <Grid>.. also a <Style> with TargetType="3rd_party_control" and somewhere inside the style i have <ControlTemplate><Grid><style_of_3rd_party_control><Grid><ControlTemplate>

then wherever i use that 3rd party control i always have a grid behind it (or better said around it)

can somebody help me with it??? please

Answer 3

I think you would benefit most from reading up more on Controls and Templating.

You can tailor the Template for any WPF control, or include the control in another "parent container" control.

 

Below is a simple example. Create a new WPF project, call it "WpfApplication14" for ease of cut and paste:

  

MyThirdPartyControl.xaml

<UserControl x:Class="WpfApplication14.MyThirdPartyControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Width="100" Height="80" Background="Red">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="3rdPC"/>
    </Grid>
</UserControl>

 

MainWindow.xaml

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="WpfApplication14.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="640" Height="480"
    xmlns:local="clr-namespace:WpfApplication14">
    
	<Window.Resources>
		<Style x:Key="MyThirdPartyControlStyle1" TargetType="{x:Type local:MyThirdPartyControl}">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type local:MyThirdPartyControl}">
						<Grid>
							<Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True" BorderBrush="#FF0010FF" BorderThickness="3,3,3,3" VerticalAlignment="Center" HorizontalAlignment="Center">
								<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Window.Resources>

    <StackPanel x:Name="LayoutRoot">
        <local:MyThirdPartyControl Style="{DynamicResource MyThirdPartyControlStyle1}" Margin="5"/>
        <local:MyThirdPartyControl Margin="5"/>
    </StackPanel>
    
</Window>

 

This is just a rough example, using a local control to represent the third party control, but the principle is the same.

 

Regards,
Pete



---

#PEJL

Answer 4

Thanks,

though as far i understood your example, a ContentTemplate={TemplateBinding ContentTemplate} copies same content as the target control to be styled contains? am i right?

the thing is, if my controlto be styled, contains a button and a textbox, and the textbox is just copied to  underlying ContentTemplate={TemplateBinding ContentTemplate} (which is in a <Grid>), how do i get that button to be copied too?

pls response

Answer 5

I do not understand exactly what your question is, as it seems you are struggling with some basic Styling and Templating concepts.

IMO, this forum is not for teaching WPF basics, but for solving WPF related technical issues.

If you supply a code example of where you are stuck, we can help you fix it.

Learn more : Control Customisation - Using Templates to Customize WPF Controls - Styling & Templating - ContentPresenter

 

I offer one last example. Start  anew WPF project called "WpfApplication32", replace the contents of MainWindow.xaml with this, run, study.

<Window x:Class="WpfApplication32.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
	<Window.Resources>
		
		<ControlTemplate x:Key="MyTemplate" TargetType="{x:Type ContentControl}">
			<Grid Background="Yellow" Margin="20">
				<Border Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{TemplateBinding Background}" >
					<ContentPresenter Content="{TemplateBinding Content}"/>
				</Border>
			</Grid>
		</ControlTemplate>

		<Style x:Key="MyStyle" TargetType="{x:Type ContentControl}">
			<Setter Property="Template" Value="{StaticResource MyTemplate}" />
		</Style>

	</Window.Resources>
    <Grid>
    	<Grid.RowDefinitions>
    		<RowDefinition />
    		<RowDefinition />
    	</Grid.RowDefinitions>
        <ContentControl Style="{DynamicResource MyStyle}" Background="Red" >
        	<StackPanel>
        		<Rectangle Fill="Black" Width="30" Height="30" Margin="3"/>     	
        		<Rectangle Fill="Black" Width="30" Height="30" Margin="3"/>     	
			</StackPanel>
        </ContentControl>
        <ContentControl Template="{DynamicResource MyTemplate}" Background="Blue" Grid.Row="1" >
        	<StackPanel Orientation="Horizontal">
        		<Rectangle Fill="Black" Width="30" Height="30" Margin="3"/>     	
        		<Rectangle Fill="Black" Width="30" Height="30" Margin="3"/>     	
			</StackPanel>
        </ContentControl>
    </Grid>
</Window>

 

 

I hope you have found these posts useful.

 

Regards,
Pete

---

#PEJL

Answer 6

Dude, this is a technical issue. Your example is useless, you obviously dont understand me.

This is what i need:

some3rdPartyControlWhichSourceCodeICANTAccess is a control that has a button and a texbox inside

then i change the style of that control and i try to wrap itwith a <Grid> but i still want button and textbox with their custom settings to be kept.

i dont want explicit to create my button in <Grid>...

<Style TargetType:{x:Type some3rdPartyControlWhichSourceCodeICANTAccess }>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType:{x:Type some3rdPartyControlWhichSourceCodeICANTAccess }>

<Grid>

<some3rdPartyControlWhichSourceCodeICANTAccess />

</Grid>

</ControlTemplate>

</Setter.Value

</Style>

do you understand now? wrap a control in its style with a grid.. thats the headline.. thats what i was trying to say. 

sorry i know my english is bad then its not my first language :)

can you help me?

Answer 7

Sorry cyb3r1st, let me break it down...

some3rdPartyControlWhichSourceCodeICANTAccess is a control that has a button and a texbox inside

Let's pretend this is the control. It has a textbox, button, and event to return the textbox text value:

<UserControl x:Class="WpfApplication33.some3rdPartyControlWhichSourceCodeICANTAccess"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
    	<TextBox x:Name="txtText" TextWrapping="Wrap" VerticalAlignment="Center" Width="100"/>
    	<Button Content="Submit" Grid.Column="1" Height="22" VerticalAlignment="Center" Margin="5,0,0,0" Click="Button_Click"/>
    </Grid>
</UserControl>

using System;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication33
{
    public partial class some3rdPartyControlWhichSourceCodeICANTAccess : UserControl
    {
        public event EventHandler<ClickedEventArgs> ClickedEvent;

        public class ClickedEventArgs : EventArgs
        {
            public string Text { get; set; }
        }

        public some3rdPartyControlWhichSourceCodeICANTAccess()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (ClickedEvent != null)
                ClickedEvent(this, new ClickedEventArgs { Text = txtText.Text });
        }
    }
}

 

then i change the style of that control

<Window x:Class="WpfApplication33.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:local="clr-namespace:WpfApplication33">
	<Window.Resources>
		<Style x:Key="someStyle1" TargetType="{x:Type local:some3rdPartyControlWhichSourceCodeICANTAccess}">
			<Setter Property="Background" Value="Red" />
		</Style>
	</Window.Resources>
    <Grid>
        <local:some3rdPartyControlWhichSourceCodeICANTAccess Style="{DynamicResource someStyle1}" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Grid>
</Window>

Style to change background to Red.

 

and i try to wrap itwith a <Grid> but i still want button and textbox with their custom settings to be kept.

<Window x:Class="WpfApplication33.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:local="clr-namespace:WpfApplication33">
	<Window.Resources>
		<Style x:Key="someStyle1" TargetType="{x:Type local:some3rdPartyControlWhichSourceCodeICANTAccess}">
			<Setter Property="Background" Value="Red" />
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type local:some3rdPartyControlWhichSourceCodeICANTAccess}">
<Grid Background="Yellow">	
						<local:some3rdPartyControlWhichSourceCodeICANTAccess Background="{TemplateBinding Background}" Margin="10" ClickedEvent="MyClickedEvent" />
</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Window.Resources>
    <Grid>
    	<Grid.RowDefinitions>
    		<RowDefinition />
    		<RowDefinition />
    	</Grid.RowDefinitions>
        <local:some3rdPartyControlWhichSourceCodeICANTAccess Background="Red" VerticalAlignment="Center" HorizontalAlignment="Center" ClickedEvent="MyClickedEvent" />
        <local:some3rdPartyControlWhichSourceCodeICANTAccess Style="{DynamicResource someStyle1}" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" />
    </Grid>
</Window>

Here are both original control, and retemplated control. Notice the event handler is in the template.

 

If this technique doesn't work for you, you will have to create your own UserControl, which consists of the grid and some3rdPartyControlWhichSourceCodeICANTAccess. But then you will have to add dependancy properties to your UserControl for any properties you need to style or data-bind.

 

You can't get at the template for some3rdPartyControlWhichSourceCodeICANTAccess? Have you got a copy of Expression Blend? or Show Me The Templates

WPF controls are extensible, which means you can get to and change the template. In blend you can select any control and "Copy Template", then edit it.

 

Hope that helps?
Pete

---

#PEJL

Answer 8

this is way better, though i knew that you can do this:

<Style x:Key="someStyle1" TargetType="{x:Type local:some3rdPartyControlWhichSourceCodeICANTAccess}">
<Setter Property="Background" Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:some3rdPartyControlWhichSourceCodeICANTAccess}">
<Grid Background="Yellow">
<local:some3rdPartyControlWhichSourceCodeICANTAccess Background="{TemplateBinding Background}" Margin="10" ClickedEvent="MyClickedEvent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

but what is not working for me is to use style without custom resources key. Notice in below Style definition there is no x:Key

<Style TargetType="{x:Type local:some3rdPartyControlWhichSourceCodeICANTAccess}">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:some3rdPartyControlWhichSourceCodeICANTAccess}">
<Grid Background="Yellow">
<local:some3rdPartyControlWhichSourceCodeICANTAccess Background="{TemplateBinding Background}" Margin="10" ClickedEvent="MyClickedEvent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How do i do this? Without x:Key this Style wil be applied to every local:some3rdPartyControlWhichSourceCodeICANTAccess in my window.

Please help

Answer 9

Hi cyb3r1st,

Sorry for my jumping in, I think xaml guy has provided you a good solution of your issue, as for your last concern:

-->How do i do this? Without x:Key this Style wil be applied to every local:some3rdPartyControlWhichSourceCodeICANTAccess  in my window.

You could put your style into Window resource level or Application resource level, and then it will be applied to every sub level control.

best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 10

i dont know how is that going to help me much???