CODEWITHSUNDEEP
c#wpfxaml
Cookie Monster
Cookie Monster

Reputation: 646

wpf- making an entire box clickable

I have a rectangle textbox in WPF and there is already a button inside the textbox which is clickable. I need to make the entire rectangle textbox clickable, so users can click anywhere in the textbox rather than just the button to interact.

Is it possible to do so?

Here is my XAML:

<Grid Background="{StaticResource TinyGrayBrush}" Height="260" Width="530" Margin="10,10,10,10" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120*"/>
        <ColumnDefinition Width="140*"/>
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0">
        <Image x:Name="imgCard" Source="{StaticResource Exception-NoImageAvailable}" Stretch="Fill" />
        <Image x:Name="hotpickEn" Source="{StaticResource HotPickEn}" Height="20" Width="70" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,30,0,0" Visibility="Hidden" />
        <Image x:Name="hotpickCh" Source="{StaticResource HotPickCH}" Height="20" Width="70" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,30,0,0" Visibility="Hidden" />
    </Grid>
    <Grid x:Name="gdEnglish" Visibility="Visible" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="12*"/>
            <RowDefinition Height="62*"/>
            <RowDefinition Height="90*"/>
            <RowDefinition Height="5*"/>
            <RowDefinition Height="55*"/>
            <RowDefinition Height="10*"/>
        </Grid.RowDefinitions>
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Margin" Value="25,5,25,5"/>
            </Style>
        </Grid.Resources>
        <TextBlock Grid.Row="1" x:Name="txtTitle" Text="SPARKLING SUNDAY BRUNCH BUFFET" FontSize="20" TextWrapping="Wrap" FontWeight="Medium" Foreground="{StaticResource SemiDarkGrayBrush}" Margin="5,0,5,6.5" />
        <TextBlock Grid.Row="2" x:Name="txtDesc" Text="Pop your Sunday Morning with luxury sparkling bubble" FontSize="16" TextWrapping="Wrap" Foreground="{StaticResource GrayBrush}" Margin="5,3.5,5,6.5" />
        <TextBlock Grid.Row="3" x:Name="txtPoint" Text="138,900 GP" FontSize="21" TextWrapping="Wrap" FontWeight="Medium" Foreground="{StaticResource GrayBrush}" Margin="25,3.5,25,6"  />
        <Button Grid.Row="4" x:Name="btnFindOutMore" Content="FIND OUT MORE OR REDEEM" Style="{StaticResource SmallWhiteRedButton}" Margin="12,0,12,0" FontSize="20" />
    </Grid>
    <Grid x:Name="gdChinese" Visibility="Hidden" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="12*"/>
            <RowDefinition Height="62*"/>
            <RowDefinition Height="90*"/>
            <RowDefinition Height="5*"/>
            <RowDefinition Height="55*"/>
            <RowDefinition Height="10*"/>
        </Grid.RowDefinitions>
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Margin" Value="25,5,25,5"/>
            </Style>
        </Grid.Resources>
        <TextBlock Grid.Row="1" x:Name="txtCHTitle" Text="SPARKLING SUNDAY BRUNCH BUFFET" FontSize="20" TextWrapping="Wrap" FontWeight="Medium" Foreground="{StaticResource SemiDarkGrayBrush}" HorizontalAlignment="Left" Margin="5,4.667,0,5.333" />
        <TextBlock Grid.Row="2" x:Name="txtCHDesc" Text="Pop your Sunday Morning with luxury sparkling bubble" FontSize="16" TextWrapping="Wrap" Foreground="{StaticResource GrayBrush}" HorizontalAlignment="Left" Margin="5,4.667,0,5.667" />
        <TextBlock Grid.Row="3" x:Name="txtCHPoint" Text="138,900 GP" FontSize="21" TextWrapping="Wrap" FontWeight="Medium" Foreground="{StaticResource GrayBrush}" HorizontalAlignment="Left" Margin="25,3.5,25,6" Width="105"  />
        <Button x:Name="btnCHFindOutMore" Grid.Row="4" Content="FIND OUT MORE OR REDEEM" Style="{StaticResource SmallWhiteRedButton}" Margin="15,0,10,0"/>
    </Grid>

Upvotes: 0

Views: 686

Answers (1)

X39
X39

Reputation: 817

As you are using Code-Behind for this:

You basically subscribe to the events of the Grid too

gdEnglish.TouchDown += gdEnglish_TouchDown;
gdEnglish.TouchUp += gdEnglish_TouchUp;
gdEnglish.TouchLeave += gdEnglish_TouchLeave;
gdEnglish.MouseDown += gdEnglish_MouseDown;
gdEnglish.MouseUp += gdEnglish_MouseUp;
gdEnglish.MouseLeave += gdEnglish_MouseLeave;

add a new private variable to indicate the current state

private bool gdEnglish_clickflag = false;

and create the different event handlers 

private void gdEnglish_MouseLeave(object sender, MouseEventArgs e)
{
    gdEnglish_clickflag = false;
}

private void gdEnglish_MouseUp(object sender, MouseButtonEventArgs e)
{
    if (gdEnglish_clickflag)
    {
        gdEnglish_clickflag = false;
        e.Handled = true;

            //////////
            // YOUR //
            // CODE //
            //////////
        }
    }

private void gdEnglish_MouseDown(object sender, MouseButtonEventArgs e)
{
    gdEnglish_clickflag = true;
}

private void gdEnglish_TouchLeave(object sender, TouchEventArgs e)
{
    gdEnglish_clickflag = false;
}

private void gdEnglish_TouchUp(object sender, TouchEventArgs e)
{
    if (gdEnglish_clickflag)
    {
        gdEnglish_clickflag = false;
        e.Handled = true;

        //////////
        // YOUR //
        // CODE //
        //////////
    }
}

private void gdEnglish_TouchDown(object sender, TouchEventArgs e)
{
    gdEnglish_clickflag = true;
}

I still want to recommend that you research the topic MVVM with WPF

it will make things like this more clean and easy

Upvotes: 1

Related Questions