Discussion :

[LeRoc]

Bonjour,
Je souhaite créer une classe dérivant de ContentControl pour implémenter un deuxième Content.
En effet ContentControl contient un objet Content pour y mettre.. et bien du contenu et je souhaite avoir deux contenu un peu comme les expender du toolkit.

Motivation du besoin en fin de page.

Soit le code super allégé

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    public class DoubleContent : ContentControl
    {
        public DoubleContent()
        {
            this.DefaultStyleKey = typeof(DoubleContent);
 
 
        }
        public static readonly DependencyProperty HeaderContentProperty =
DependencyProperty.Register("HeaderContent", typeof(object), typeof(DoubleContent), null);
        public object HeaderContent
        {
            get { return (object)GetValue(HeaderContentProperty); }
            set { SetValue(HeaderContentProperty, value); }
        }
    }

En fait le HeaderContent peut être null au départ ou varier en fonction du contexte.
Càd changer plusieurs fois après la création de l'objet.
En mode proto cad avec un controle header existant dès le départ tout le système fonctionnait.
En ajoutant le même header après création c'est le bronx on voit en debug dans les measure et autres ArrangeOverride que l'objet prend systématiquement une hauteur 0.

Un bout de xaml si ça peu aider à m'aider. (ou on voit les 2 contentControl)

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <Style TargetType="local:DoubleContent">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:DoubleContent">
                    <Canvas x:Name="RootElement" Background="Transparent" >
 
                        <ContentControl Canvas.Left="0" Canvas.Top="0" Background="Blue"
                                x:Name="HeaderElement" 
                                Content="{TemplateBinding HeaderContent}"/>
                        <ScrollViewer   x:Name="ScrollElement" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Padding="0" BorderThickness="0" >
                            <ContentControl Background="Blue"
                                    x:Name="ContentElement"  Content="{TemplateBinding Content}" />
                        </ScrollViewer>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Motivation du besoin (ça peut aider à comprendre ) mon fardeau : avoir un control inconnu à la compile qui viendra par custo enduser se placer dans le Header (et les objets existant StackPanel et autres Grid ne peuvent rendre le service attendu à cause du système de placement spécifique)
J'ai épluché, comme j'ai pu le source du toolkit de codeplex, pour trouver de l’inspiration, c'est trop chaud pour moi (et sans doc pas cool pour comprendre si les techniques peuvent s'appliquer à mon besoin)


Merci aux courageux qui auront lu jusqu'ici

[micka132]

Le problème c'est que le header.height est toujours a NAN ?
J'ai essayé un truc dans ce genre là:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 private const string HeaderElement = "HeaderElement";
        ContentControl contHeaderElement;
        private const string ScrollElement = "ScrollElement";
        ScrollViewer contScrollElement;
 
        private const string CanvasName = "RootElement";
        Canvas canCanvas;
 
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            contHeaderElement = GetTemplateChild(HeaderElement) as ContentControl;
            contScrollElement = GetTemplateChild(ScrollElement) as ScrollViewer;
            canCanvas = GetTemplateChild(CanvasName) as Canvas;
            if (contHeaderElement != null)
            {
                contHeaderElement.SizeChanged += new SizeChangedEventHandler(contHeaderElement_SizeChanged);
 
            }   
        }
 
        void contHeaderElement_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (contScrollElement != null && canCanvas != null)
            {
                Canvas.SetTop(contScrollElement, e.NewSize.Height);
 
            }
        }
 
        public DoubleContent()
        {
            this.DefaultStyleKey = typeof(DoubleContent);
        }
        public static readonly DependencyProperty HeaderContentProperty =
DependencyProperty.Register("HeaderContent", typeof(object), typeof(DoubleContent), null);
 
        public object HeaderContent
        {
            get { return (object)GetValue(HeaderContentProperty); }
            set { SetValue(HeaderContentProperty, value); }
        }
 
 
    }

[Skyounet]

C'est a cause de ton Layout. Tu utilises un Panel, utilise un Grid (avec donc 2 lignes Auto et *) et tu verras ca ira tout de suite mieux.

[LeRoc]

Désolé du temps mort mais j'étais en déplacement.
Pour micka132.

Chez moi le contHeaderElement vaut null dans le OnApplyTemplate car le content customisé ne sera connu que plus tard.
Ce qui fait que quand je l'affecte enfin je dois lui forcer un appel à Measure(xx) pour que le controlheader fasse son propre ApplyTemplate (je m'y prend comme un manche??).

Le problème c'est qu'entre le Measure(xx) que je fille et le availableSize que je reçois dans le Headerelement y a la hauteur qui passe à 0.
D'ou des phénomènes type header.height à NAN.

Le top juste pour rire j'ai pris le proto qui marche avec le header connu dès le départ mas en visible=Collapsed et bien j'ai beau le remettre visible plus tard c'est pareil il reste à hauteur 0.

Mais merci pour ta tentative

[LeRoc]

Pour réponde à Skyounet
Les placements engendrés par le grid ne me convenaient pas. J'ai donc fouillé le Toolkit dans les expender et autre accordion pour voir si en les aidant un peu ils pourraient répondre à mes besoins.
Et oups trop balaise pour moi, même si c'est instructif (mais ça fout un coup au moral quand on voit l'étendue de son incompétence).
Mon problème de fond c'est aussi de faire une animation entre les deux content dont je calcul le placement relatif moi même, et je ne sais pas faire de scénario d'animation qui puisse changer de parent ou même de colonne ou de colspan etc en douceur.
D'ou l'usage brutal du canvas

De façon générale si vous trouvez que je monte une usine n'hésitez pas à me le dire.
le CDC : deux content couplés mais dont un est connu plus tard, placement relatif à calculer selon x paramètres, animation entre les deux content.
Et voila.

[micka132]

En fait je comprend pas pourquoi le contHeaderElement est null.
C'est le Content de ce contHeaderElement qui devrait être null.
Ce test est uniquement là dans l'hypothese ou la personne a redéfinis un template du control tout entier et n'a pas mis de contHeaderElement.
C'est le cas?

[LeRoc]

Mer.. heu Pardon j'ai du mélanger les copiercoller (l'excuse de base)

En fait la redéfinition doit respecter le contrat que je n'ai pas mis dans le message initial.
J'ai fait de l'épuration pour alléger la question mais ça limite la fiabilité
Pour compléter partiellement j'ai aussi entre autre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
      [TemplatePart(Name = "RootElement", Type = typeof(Canvas))]
    [TemplatePart(Name = ".HeaderElement", Type = typeof(ContentControl))]
    [TemplatePart(Name = "ContentElement", Type = typeof(FrameworkElement))]
    [TemplatePart(Name = "ScrollElement", Type = typeof(FrameworkElement))]
    [TemplateVisualStateAttribute(Name = "xx", GroupName = "CommonStates")]
    [TemplateVisualStateAttribute(Name = "etc", GroupName = "CommonStates")]
    public class DoubleContent : ContentControl
    {

Donc HeaderElement n'est pas null c'est bien HeaderContent qui est null au démarrage et affecter par la suite.

[Skyounet]

Dans cet article je fais exactement la meme chose.

Je persiste a dire que c'est la faute au Canvas.

http://broux.developpez.com/articles...ilverlight/#L2

[LeRoc]

D'accord je vais regarder ton article avant de faire n'importe quoi.

[LeRoc]

Ok ton exemple et sympa et plus facile à comprendre/adapter que le montage : Expander : HeaderedContentControl du toolkit, en tout cas il est nickel pour ce faire un expander maison.
Comme je dois gérer un placement qui n'est pas réalisable avec les combinaisons de l'expender du toolkit, je tentais une autre approche.
Ton exemple est plus simple et clair à exploiter mais me posera le même problème de placement/replacement par animation.

Le code du tookit permettrait de positionner dynamiquement l'emplacement du header mais toujours sur un principe Grid et en plus tu auras noté, dans mon xaml, la présence d'un ScrollViewer qui engendre son lot de problèmes pour rendre l'affichage plus "intelligent".

Pour que tu vois de quelle partie du toolkit je parle :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" x:Name="rd0"/>
        <RowDefinition Height="Auto" x:Name="rd1"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" x:Name="cd0"/>
        <ColumnDefinition Width="Auto" x:Name="cd1"/>
    </Grid.ColumnDefinitions>
    <ToggleButton Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" Grid.Column="0" Grid.Row="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{TemplateBinding IsExpanded}" Margin="1" MinHeight="0" MinWidth="0" x:Name="ExpanderButton" Padding="{TemplateBinding Padding}" Template="{StaticResource ExpanderDownHeaderTemplate}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
    <ContentControl Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" Grid.Column="0" Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="ExpandSite" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>
</Grid>

Je poursuis donc pour trouver une solution car naïvement j'avais répondu qu'il était possible de répondre à la demande.
(Il faut dire qu'en javascript par manip de div tout à la mano, je saurais le faire, mais je suis un défendeur des vrais langages;-))

[Skyounet]

C'est quel type d'affichage que tu veux obtenir ?

Tu veux que ton header soit place ou par rapport a ton content ?

[LeRoc]

De chaque coté comme en GRID mais aussi en flottant ou en pseudo tooltip c'est à dire que potentiellement le contant prend toute la place dispo et que le header se met dessus en masquant partiellement le content, un peu comme une boite de propriété rattachée et parfois flottante.
Et le coté tape a l’œil chiant, une animation qui repositionne les deux éléments en passant par exemple le header du bas vers la droite en resizant joliment les deux objets, d'ou aussi le calvaire du canvas seul endroit ou je sais jouer une animation fluide de replacement.

Mais la je tiens le bon bout je secoue un peu le measureoverride et ça passe (un peu souvent dans la measure des sous niveaux mais bon).
Entre temps j'ai essayé un "sous contenaire" pour avoir toujours un header valable et ça passe aussi, mais faut refaire pas mal de code et c'est aussi du bricolage car je ne garantis plus du tout qu'un designer ne mettra pas le brun en personnalisant les aspects par le xaml.
Si dès le début on avait dit pas personnalisable en dehors des couleurs je n’aurais même pas tenté de rester dans la ligne de pensée xaml et j'aurais fait les calculs moi même à l'ancienne.
Donc merci beaucoup pour ton aide qui m’aura permis de voir un chouette exemple de code d'expander.
Comme ce que j'ai fait n'est pas très bô ça ne fera pas école.
Si un jour c'est visible sur le net je me rappellerai à ton bon souvenir pour que tu vois le résultat (si je finalise )