点击按钮时显示按钮内容

本文关键字：按钮 显示 | 更新日期: 2023-09-27 18:18:41

<Button Name="Dog" Content="Dog"
 Height="80" FontSize="17" 
 Width="{Binding RelativeSource={RelativeSource Self},Path=Height}"    
 Click="Dog_Click"/>

我的问题是:怎么做??正常情况下，按钮内容是隐藏的，当我点击按钮的内容"狗"可见。由于

点击按钮时显示按钮内容

这是纯xaml解决方案，没有任何代码涉及这里的图片将是可见的，而按下按钮。

<Window x:Class="TriggeredButtonVisibility.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:triggeredButtonVisibility="clr-namespace:TriggeredButtonVisibility"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Style x:Key="ButtonStyleKey" TargetType="Button">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <TextBlock x:Name="ButtonContentTextBlock" Text="Press Me" 
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"></TextBlock>
                        <Image x:Name="ButtonContentPicture" 
                               Source="Resources/Pic.jpg" 
                               Stretch="Fill" Visibility="Collapsed" 
                               Margin="50" IsHitTestVisible="False"/>
                    </Grid>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource  Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsPressed}"  Value="True">
                            <Setter TargetName="ButtonContentTextBlock" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="ButtonContentPicture" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Button Style="{StaticResource ButtonStyleKey}">Press Me</Button>
</Grid></Window>

如果你想将一些DataTemplate内部控件属性绑定到父(按钮)数据上下文，可以使用RelativeSource绑定。例如:{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=DataContext.DataContextData} .

视图模型所涉及的MVVM方法的图像可见性在视图模型级别进行管理。
1. Xaml: 

<Window x:Class="TriggeredButtonVisibility.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:triggeredButtonVisibility="clr-namespace:TriggeredButtonVisibility"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <triggeredButtonVisibility:ButtonLogicViewmodel></triggeredButtonVisibility:ButtonLogicViewmodel>
</Window.DataContext>
<Window.Resources>
    <Style x:Key="ButtonStyleKey" TargetType="Button">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type triggeredButtonVisibility:ButtonLogicViewmodel}">
                    <Grid>
                        <TextBlock x:Name="ButtonContentTextBlock" Text="Press Me" 
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"></TextBlock>
                        <Image x:Name="ButtonContentPicture" 
                               Source="Resources/Pic.jpg" 
                               Stretch="Fill" Visibility="Collapsed" 
                               Margin="50" IsHitTestVisible="False"/>
                    </Grid>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding  WasPressedAtOnse, UpdateSourceTrigger=PropertyChanged}"  Value="True">
                            <Setter TargetName="ButtonContentTextBlock" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="ButtonContentPicture" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Button Style="{StaticResource ButtonStyleKey}" Command="{Binding PressCommand}" Content="{Binding }"/></Grid></Window>

2。ViewModel代码:

    public class ButtonLogicViewmodel:BaseObservableObject
{
    private bool _wasPressedAtOnse;
    private ICommand _pressCommand;
    public ButtonLogicViewmodel()
    {
        WasPressedAtOnse = false;
    }
    public ICommand PressCommand
    {
        get { return _pressCommand ?? (_pressCommand = new RelayCommand(OnPress)); }
    }
    private void OnPress()
    {
        WasPressedAtOnse = !WasPressedAtOnse;
    }
    public bool WasPressedAtOnse
    {
        get { return _wasPressedAtOnse; }
        set
        {
            _wasPressedAtOnse = value;
            OnPropertyChanged();
        }
    }}

认为,

您可以为Button设置一个子控件，如:

<Button Name="Dog">
   <Button.Content>
    <!--Add a Grid here or whatever and bind Visibility={Binding Path=..., Mode="TwoWay", UpdateSourceTrigger="PropertyChanged"}-->
   </Button.Content>
</Button>

在您的Dog_Click事件中，只需将可见性设置为Visibility. visible。不要忘记将默认设置为可见性。隐藏的

相关文章：