Search code examples
c#xamlexpander

can't click in a TextBox with an Expander

After adding an Expander over a TextBox, I'm not able to click on the original TextBox. For example 

<Grid Background="Yellow" Focusable="False">
    <TextBox Margin="0,20,0,0"  Background="Azure" Width="150" Height="30"/>
    <Expander  Focusable="False">
        <Grid Background="White" >
            <TextBox  Background="LightGreen" Width="150" Height="30"/>
        </Grid>
    </Expander>
</Grid>

the above azure TextBox is not clickable: I have to tab in it...

enter image description here

... while the green one works fine

enter image description here

Edit I've tried to add false focusable in the expander

Solution

  • Your Expander is placed on top of your azure TextBox (they both are placed on the same grid in the same cell 0,0), so azure TextBox can not be clicked. If you change their z-order by placing azure TextBox after Expander, then azure TextBox will become clickable (but it will prevent green TextBox to be clickable):

    <Grid Background="Yellow" Focusable="False">    
  <Expander  Focusable="False">
    <Grid Background="White" >
        <TextBox  Background="LightGreen" Width="150" Height="30"/>
    </Grid>
  </Expander>
  <TextBox Margin="0,20,0,0"  Background="Azure" Width="150" Height="30"/>
</Grid>

    You cannot have 2 TextBoxes to be clickable, if they are placed on top of one another.

    To achieve your goal (to access one TextBox when the Expander is expanded and the other one when the Expander is collapsed) you can collapse azure TextBox, when expander is expanded. Here is an example how to do it with Triggers (or you can do it in code for simplicity):

    <Grid Background="Yellow">
<Expander Name="Expander">      
  <Grid Background="White" >
    <TextBox  Background="LightGreen" Width="150" Height="30"/>
  </Grid>
</Expander>
<TextBox Name="AzureBox" Margin="0,20,0,0"  Background="Azure" Width="150" Height="30">
  <TextBox.Style>
    <Style>
      <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=Expander, Path=IsExpanded}" Value="True">
          <Setter Property="TextBox.Visibility" Value="Collapsed"></Setter>
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </TextBox.Style>
</TextBox>