Xaml default background and transparent background

6 בNovember 2016

אין תגובות

Xaml  default background and transparent background
This post will guide you to the internal rendering brush mechanism with interaction between elements on the element visual tree, could also be relevant to solve UI bugs on xaml code,
(which are not bugs in simple meaner, only misunderstanding of the platform)
1.    While debugging an visual tree of custom control template you might find elements with Background =””. In most of cases it will not harm your application,
But can also be effected in user actions.

2.    Observe this code:

<Style x:Key="listItem" TargetType="{x:Type ListBoxItem}">

      <Setter Property="Template">

         <Setter.Value>

           <ControlTemplate TargetType="{x:Type ListBoxItem}">

                <Border BorderThickness="3" BorderBrush="Black" Height="42">

     <ContentPresenter  VerticalAlignment="Center" HorizontalAlignment="Center"/>

                 </Border>

            <ControlTemplate.Triggers>

                 <Trigger Property="IsSelected" Value="True">

                       <Setter Property="Foreground" Value="Red"/>

                  </Trigger>

              </ControlTemplate.Triggers>

            </ControlTemplate>

           </Setter.Value>

     </Setter>

/Style>

That style for ListBoxItem is just a way to demonstrate an UI Bug,
We are in ListBox – meaning select actions, but simple usage of it like:

<ListBox ItemContainerStyle="{StaticResource listItem}">

            <ListBoxItem>AAA</ListBoxItem>

            <ListBoxItem>BBB</ListBoxItem>

            <ListBoxItem>CCC</ListBoxItem>

            <ListBoxItem>DDD</ListBoxItem>

 </ListBox>

but, it impossible to select an item unless your directly hoover the text inside the ListBoxItem
so this is king of bug, well solution for the ‘Bug’ is simple setting the Border background the Transparent instead of Null. It will allow you to setting the selected item anywhere on top of the listbox row.
So why this wired behavior?
For an answer lets use another demo.
3.    Observe this code :

<Button Content="Default" Click="Button_Click">

              <Button.Style>

                   <Style TargetType="Button">

                       <Setter Property="Template">

                           <Setter.Value>

                               <ControlTemplate TargetType="Button">

                                   <Grid>

                                       <Ellipse Width="70" Height="70" Fill="Red" />

                                       <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

                                   </Grid>

                               </ControlTemplate>

                           </Setter.Value>

                       </Setter>

                   </Style>

               </Button.Style>

           </Button>


 <Button Content="Transparent" Click="Button_Click">

               <Button.Style>

                   <Style TargetType="Button">

                       <Setter Property="Template">

                           <Setter.Value>

                               <ControlTemplate TargetType="Button">

                                   <Grid Background="Transparent">

                                       <Ellipse Width="70" Height="70" Fill="Red" />

                                       <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

                                   </Grid>

                               </ControlTemplate>

                           </Setter.Value>

                       </Setter>

                   </Style>

               </Button.Style>

      </Button>

We have two buttons with only one major different,
The background of the inner template Grid Panel, this panel is only there since we want a round button with content on it, while Ellipse element cannot hold Content or any child.  So Clicking on the Ellipse should raise the click event, but definitely not on the grid wrapper surface,
I think that basically this is one the reasons the grid is there (in reality we cannot create a round element since UI element working only at rectangle boxes) so the Grid can be there as Virtual element but without any meaner for UX effect or application performance,
You have the power to use Xaml elements for creating a dynamic Visual tree (mostly for Templates) without worry for ‘what if user click on the left corner outside from the visible Element’ so it isn’t a bug it just a feature!
Also be a where for IsHitTestVisible=”True”
This property can used inside the ContentPresenter to make the Panel/Border around it Clickable (and spare the Background=Transparent)

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

Leave a Reply

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