Follow Xaml code Order or don’t be there

7 בDecember 2015

אין תגובות

Sometimes you surprised from tiny things around you day who might taking you out of control.

For example the Order of the Xaml elements on your sheet.

The famous one is probably using a source who defined later, like:

<DataTemplate x:Key="dt1">

           <Grid>

               <Button Style="{StaticResource style2}" />

           </Grid>

       </DataTemplate>


       <Style TargetType="Button" x:Key="style2">

In this case there is some since with it at least we can understand why,

But there are much more ugly things that works only in specific order and don’t in other,

Like next sample:

I have a listBox control and within every item I have a button to make some action,

Like:

image

Now we want that the inner button per item get colored only on highlight the parent listbox item,

Like:

image

But we also want that bringing the cursor hover this internal polygon button it will get mouse-enter effect like :

image

For the user get the feeling of ‘aright then let’s click on it’

Now to my whole Datatemplate:

<DataTemplate x:Key="Template3">

            <Grid>

                <TextBlock Name="tx" Text="{Binding}" DockPanel.Dock="Left" VerticalAlignment="Center" HorizontalAlignment="Left" />

                <Button ToolTip="Print" Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type TextBlock}}, Path=DataContext.PrintCommand}" CommandParameter="{Binding Text , ElementName=tx}">

                    <Button.Template>

                        <ControlTemplate>

                            <Polygon Name="poly"   Points=" 50,50 150,150 50,250"  Fill="Transparent" Stretch="Uniform" DockPanel.Dock="Right" VerticalAlignment="Center" HorizontalAlignment="Right" Height="20" Width="21">

                            </Polygon>

                            <ControlTemplate.Triggers>

                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsMouseOver}" Value="True">

                                    <Setter Property="Fill" TargetName="poly" Value="Silver" />

                                </DataTrigger>

                                <Trigger Property="IsMouseOver" Value="true">

                                    <Setter Property="Fill" TargetName="poly" Value="Red" />

                                </Trigger>

                            </ControlTemplate.Triggers>

                        </ControlTemplate>

                    </Button.Template>

                </Button>

            </Grid>

        </DataTemplate>

The color change trick is quite simple the standard color of the polygon is transparent, and we play on it in occasions like mouse enter etc..
But we have got two kinds of triggers: the first is simple style trigger goes directly
On the button, the second is more complex one , to connect the poly-button to its ancestor, the list-box-item so we used DataTrigger for it.
Until here it is fantastic.
Its looks an easy, and indeed it is ,unless if you switch between the triggers ,
Meaning put the regular trigger above the DataTrigger



  <ControlTemplate.Triggers>

                                <Trigger Property="IsMouseOver" Value="true">

                                    <Setter Property="Fill" TargetName="poly" Value="Red" />

                                </Trigger>

                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsMouseOver}" Value="True">

                                    <Setter Property="Fill" TargetName="poly" Value="Silver" />

                                </DataTrigger>

                            </ControlTemplate.Triggers>

and it cannot functioning..
Since the order is everything, and dataTrigger must come before regular trigger.
Keep it in your minds !

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *