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...

... while the green one works fine

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

回答1:

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>

回答2:

It looks like an issue with the dimensions of the Expander when it is collapsed: the expansion must be caused by its internal content. The following xaml works as expected.

<Grid Background="Yellow" Height="290" Width="290">
    <TextBox HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0"  Background="Azure" Width="150" Height="30"/>
    <Expander ExpandDirection="Down"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Margin="5,0,0,0" >
        <Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="290" Width="290">
            <TextBox HorizontalAlignment="Center" Margin="0,0,5,45" VerticalAlignment="Center" Background="LightGreen" Width="150" Height="30"/>
        </Grid>
    </Expander>
</Grid>

来源：https://stackoverflow.com/questions/36692879/cant-click-in-a-textbox-with-an-expander

标签

xaml

expander