CODEWITHSUNDEEP
wpfvisual-studioxaml
user2499088
user2499088

Reputation: 645

WPF action on LostFocus textbox

I'm working on a WPF application and i have a little problem.

I have 1 ToggleButton and 1 TextBox. When i click on the ToggleButton, the TextBox apears and gets focus. This is good. But now i want that when i click on another textbox or just somewhere else, that the textbox loses his focus and disapears. I tried this with Differnet triggers and setters, but can't get it to work.

My code now:

  <ToggleButton x:Name="SearchButton" Width="100" Height="100" BorderThickness="0"  Margin="580,0,0,0" Template="{DynamicResource ButtonBaseControlTemplate1}" Panel.ZIndex="1">
        <ToggleButton.Style>
            <Style TargetType="ToggleButton">
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding IsChecked, ElementName=SearchButton}" Value="True" />
                            <Condition Binding="{Binding Visibility, ElementName=SearchBox}" Value="Visible"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="FocusManager.FocusedElement" Value="{Binding ElementName=SearchBox}" />
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>
    </ToggleButton><TextBox x:Name="SearchBox" Margin="100,33,0,34" Visibility="{Binding IsChecked, ElementName=SearchButton, Converter={StaticResource BoolVisibilityConverter}}" Opacity="0" FontSize="24" FontFamily="Arial" Background="{x:Null}" Foreground="#FF7F7F7F" BorderThickness="0">
        <TextBox.Style>
            <Style TargetType="TextBox">
                <Style.Triggers>
                    <Trigger Property="TextBox.IsFocused" Value="False">
                        <Setter Property="ToggleButton.IsChecked" Value="False" TargetName="SearchButton" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TextBox.Style>
    </TextBox>

Upvotes: 2

Views: 1468

Answers (1)

Anatoliy Nikolaev
Anatoliy Nikolaev

Reputation: 22702

The fact, that the styles in the WPF separated from each other, it's just a bunch of settings setters. We can say, that two different styles for controls, with two different visual trees. So when you're trying to style TextBox to access ToggleButton it does not work, because of its visual tree no ToggleButtons.

In WPF for editing elements in the visual tree, and control in particular, uses a template control or controls placed within view of one Style (but this is usually done with the help of templates, such as DataTemplate, or with ControlTemplate).

I think it will suit you to control the Expander. It already has ToggleButton and content. Example:

XAML

<Expander Header="SearchButton">
    <TextBox Text="SearchBox: Opened" Background="Gainsboro" />
</Expander>

Output

enter image description here

To change the view of Expander, you need to change his Style. With it, you can set any form and view of control.

For more information see:

Expander in MSDN

Styling and Templating in MSDN

Customizing the Appearance of an Existing Control by Using a ControlTemplate

Data Templating Overview

Upvotes: 1

Related Questions