Creation composant silverlight

Version imprimable

Salut à tous,

Je suis débutant en silverlight et je cherche à créer les composants dont j'ai besoin, je suis en silverlight 3 vs 2010.

J'ai donc placé dans la fichier generix.xaml la définition du composant que je veux créer en gros c'est juste une sorte de boite avec un en-tête dans lequel je veux pouvoir placer d'autre composants (Textblock, chabox, TextBox...) en mode design:

Voici le code Xaml
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <Grid x:Name="LayoutRoot" Background="White"> <Border Margin="0,20,0,0" BorderThickness="1,1,1,1" BorderBrush="Silver"> <Grid Name="ContentGrid"> </Grid> </Border> <Border CornerRadius="8,8,0,0" BorderBrush="Silver" BorderThickness="1" Height="25" HorizontalAlignment="Stretch" VerticalAlignment="Top" > <TextBlock x:Name="TXT_Header" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"></TextBlock> <Border.Background> <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0"> <GradientStop Color="White" Offset="0"/> <GradientStop Color="#FF8991FF" Offset="0.25"/> <GradientStop Color="Blue" Offset="0.4"/> <GradientStop Color="Navy" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> </Grid>
J'ai bien évidement une classe associée, mais là n'est pas la question.
Aprés compilation je cherche à utiliser mon composant et je ne peux pas le remplir avec des éléments, j'ai un message intellisense de vs :

Citation:

TestHeaderedPresenter does not support direct content

Bref quelqu'un sait-il comment je dois faire pour bien faire pour permettre de remplir ce composant ?

Merci à tous,

15/04/2010, 11h09
Nathanael Marchand
Il doit y'avoir un truc à faire:
Créer une dependency property Content dans ton code behind qui peut contenir un contrôle.
Ajouter un composant ContentPresenter dont le contenu est bindé a ta dependency property.

Apres tu devrais pouvoir te service de ton composant comme ceci:
Code:

1 2 3 4 5 <TestHeaderedPresenter> <TestHeaderedPresenter.Content> <TextBlock Text="Coucou" /> </TestHeaderedPresenter.Content> </TestHeaderedPresenter>
15/04/2010, 11h12
DaMo`

Ou il suffit que ton custom control hérite de ContentControl avec un ContentContainer du genre une grid et tu pourras le remplir avec ce que tu veux
15/04/2010, 11h32
Nathanael Marchand

Mais sais-tu que tu as dans le silverlight toolkit tu as un contrôle tout prêt pour cette usage?

Creation compo

Déjà merci à ceux qui ont répondu.

En fait vu que je developpe avec vs 2010 RC, je ne peux pas installer le toolkit, par la suite j'ai un bug qui ne me permet plus d'avoir la partie design super pratique de vs 2010... Mais bref, je prend aussi cette partie comme un exercice et aussi pour avoir le plein controle de mon design.

En fait tel que vous l'expliquez ca parait hyper logique, j'essaie de le mettre en place mais ca ne marche toujours pas.... Y'a surement un truc que je ne fait pas correctement (trop noobs pour percuter).

voici mon generic.xaml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
                    <Grid x:Name="LayoutRoot" Background="White">
                        <Border Margin="0,20,0,0" BorderThickness="1,1,1,1" BorderBrush="Silver">
                           <Grid Name="MainContent">                                    
                           </Grid>
                        </Border>
                        <Border CornerRadius="8,8,0,0" BorderBrush="Silver" BorderThickness="1" Height="25" HorizontalAlignment="Stretch" VerticalAlignment="Top" >
                            <TextBlock x:Name="TXT_Header" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"></TextBlock>
                            <Border.Background>
                                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="#FF8991FF" Offset="0.25"/>
                                    <GradientStop Color="Blue" Offset="0.4"/>
                                    <GradientStop Color="Navy" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                    </Grid>

Voici mon code behind

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
    [TemplatePart(Name = "HeaderText", Type = typeof(TextBlock))]
    [TemplatePart(Name = "MainContent", Type = typeof(Grid))]
    public partial class TestHeaderedPresenter : Control
    {
        public TestHeaderedPresenter() : base()
        {                      
            this.DefaultStyleKey = typeof(TestHeaderedPresenter); 
        }
 
        public string HeaderText
        {
            get { return GetValue(HeaderTextProperty).ToString(); }
            set { SetValue(HeaderTextProperty, value);   }
        }
 
        public static DependencyProperty HeaderTextProperty = DependencyProperty.Register(
            "HeaderText",
            typeof(string),
            typeof(TestHeaderedPresenter),
            new PropertyMetadata(
                new PropertyChangedCallback(OnHeaderTextPropertyChanged)
            )
        );
 
        public Grid MainContent
        {
            get { return (Grid)GetValue(MainContentProperty); }
            set { SetValue(MainContentProperty, value);       }
        }
 
        public static DependencyProperty MainContentProperty = DependencyProperty.Register(
            "MainContent",
            typeof(Grid),
            typeof(TestHeaderedPresenter),
            new PropertyMetadata(
                new PropertyChangedCallback(OnMainContentPropertyChanged)
            )
        );
 
        private TextBlock txt_Header;
        private TextBlock TXT_Header
        {
            get { return txt_Header; }
            set
            {
                txt_Header = value;
                if (txt_Header != null)
                {
                    txt_Header.Text = HeaderText;
                    txt_Header.IsHitTestVisible = true;
                }
            }
        }
 
 
        public override void OnApplyTemplate()
        {
            this.TXT_Header = GetTemplateChild("TXT_Header") as TextBlock;
            this.MainContent = GetTemplateChild("MainContent") as Grid;
            Debug.Assert(this.MainContent != null, "Grid MainContent is null");
            Debug.Assert(this.TXT_Header != null, "Textblock TXT_Header is null");
 
            base.OnApplyTemplate();
        }
 
        public static void OnMainContentPropertyChanged(DependencyObject dpObj,
            DependencyPropertyChangedEventArgs e)
        {
            TestHeaderedPresenter ctrl = (dpObj as TestHeaderedPresenter);
            if ((ctrl != null) && (ctrl.TXT_Header != null))
            {
                ctrl.MainContent = (e.NewValue as Grid);
            }
        }
 
        public static void OnHeaderTextPropertyChanged(DependencyObject dpObj,
            DependencyPropertyChangedEventArgs e)
        {
            TestHeaderedPresenter ctrl = (dpObj as TestHeaderedPresenter);
            if ((ctrl != null)&&(ctrl.TXT_Header != null))
            {
                ctrl.TXT_Header.Text = e.NewValue.ToString();
            }
        }
    }

Puis enfin je peux donc assigner un grid dans mon page.xaml

Code:

1
2
3
4
5
6
7
8
 
                <custom:TestHeaderedPresenter HeaderText="VOUS ETES UN CLIENT" Margin="6,235,283,113">
                    <custom:TestHeaderedPresenter.MainContent>
                        <Grid>
                            <CheckBox Content="toto"></CheckBox>
                        </Grid>
                    </custom:TestHeaderedPresenter.MainContent>
                </custom:TestHeaderedPresenter>

et là... Rien... Pas de checkbox qui ne daigne apparaitre.
Voilà, si un pro du silverlight repond c'est sympa.

15/04/2010, 16h47
Skyounet

Il faut que ton contrôle hérite de ContentControl à la place de Control. Tu peux donc enlever ton dependency MainContent.

Ensuite pour ton TextBlock dans ton theme mets ça à la place

Code:

<TextBlock x:Name="TXT_Header" Text="{TemplateBinding HeaderText}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"></TextBlock>

Pour finir pour afficher le contenu de ton contrôle il te faut un ContentPresenter

Code:

<ContentPresenter Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" />

Et là tout devrait être bon (en tu peux enlever pas mal de code également).
15/04/2010, 17h20
Stef300

Creation composant

Merci pour la réponse...

J'ai toujours un problème avec le TemplateBinding... Quel qu'en soit la forme dés que j'intègre une notion style Text="{TemplateBinding HeaderText}" ou Header text réprésente bien la dependency property que j'ai crée dans ma classe ca plante déjà en mode design avec le message "Unknown attribute Text on element TextBlock"... j'ai pourtant vérifié au bas mot 150 000 fois ma syntaxe en tenant compte des majuscules \ Minuscules rien n'y fait.

A savoir que j'ai la version vs 2010 RC... Sagit-il d'un bug ?
15/04/2010, 17h31
Stef300

Sinon pour la partie avec le ContentPresenter ca marche nickel.
Je met juste une gris dans le content et j'ai bel et bien ce que je veux.

Par contre la partie ou je TemplateBinding une dependency que je crée dan ma classe me renvoie toujours bel et bien l'"erreur du précédent post.

C'est marrant parce que j'ai fait la même chose hier. Une sorte de GroupBox (je sais pas si c'est ce que toi tu as fait mais bon).

Et j'ai bien ça

Code:

<TextBlock Margin="3,0,3,0" Text="{TemplateBinding Header}" />

Avec
Code:

1 2 3 4 5 6 7 8 9 public string Header { get { return (string)GetValue(HeaderProperty); } set { SetValue(HeaderProperty, value); } } // Using a DependencyProperty as the backing store for Header. This enables animation, styling, binding, etc... public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header", typeof(string), typeof(GroupBox), null);
Essaye de faire un clean de ta solution pis un rebuild et ensuite essaye de lancer même si ça s'affiche pas dans le designer.

15/04/2010, 20h36
Stef300

Compo

Ok, apparemment je n'ai pas le probleme sur la version de programme installée chez moi... C'est donc un bug de ma release candidate. Je vais faire des essais.... mais la méthodologie est bien celle que tu as donné.

Merci pour ces bons conseils.