WPF 基础(一)控件XAML实现隐藏(Visibility Hidden和Collapsed)和C#实现对控件的隐藏、控件显示/隐藏的判断条件

本文深入探讨了WPF框架下控件的显示与隐藏机制,详细讲解了通过XAML和C#代码实现控件状态切换的方法,并介绍了如何使用Converter进行条件判断,以动态控制控件的可见性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

第一章、简介

第二章、控件隐藏/显示

2.1、XAML实现隐藏/显示

2.2、C#实现隐藏/显示

第三章、控件显示/隐藏的判断条件

3.1、界面

3.2、判断显示条件


第一章、简介

Visibility属性常用在WPF控件中。本博客将介绍WPF中Visibility属性应用的两个问题。

  • 第一个问题是控件的隐藏/显示问题,如下代码所示:<Button Width="100" Height="100" Grid.Column="0" Grid.Row="0" Visibility="Hidden"/>
  • 第二问题判断比如文本控件输入的内容是否合法,若是非法输入,那么红色的星号一直出现,比如<Label Content="*"  Visibility="{Binding ElementName=tbk_StorageIP,Path=Text,Converter={StaticResource ipConverter}}"></Label>

 

第二章、控件隐藏/显示

        你可以在XAML实现对控件的隐藏,也可以在啊C#后台代码上实现对控件的隐藏。

2.1、XAML实现隐藏/显示

https://www.cnblogs.com/yinghualuowu/p/9717259.html

2.2、C#实现隐藏/显示

       用Visibility.Hidden,C#实现对控件的隐藏。

       /// <summary>
        /// 点击连接服务器
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_Listen_Click(object sender, RoutedEventArgs e)
        {
            string IP = null;
            IP = this.lbl_IP.Text;
            //IPAddress serverIP = IPAddress.Parse(IP);
            IPAddress serverIP = IPAddress.Parse(IP);
            IPEndPoint serverIPEndPoint = new IPEndPoint(serverIP, 50000);
            //获得要连接的远程服务器应用程序的IP地址和端口号
            Client.Connect(serverIPEndPoint);

            int i1 = Thread.CurrentThread.ManagedThreadId;
            //MessageBox.Show(Thread.CurrentThread.ManagedThreadId);
            //ShowMsg(Thread.CurrentThread.ManagedThreadId);
            //MessageBox.Show("连接成功1");
            //开启一个新的线程不停地接收服务器端发来的消息
            Thread threadReceive = new Thread(Receive);
            //将threadReceive设置为后台线程
            threadReceive.IsBackground = true;
            //启动线程
            threadReceive.Start();
            
            //隐藏
            this.lbl_IP.Visibility = Visibility.Hidden;
            this.btn_Listen.Visibility = Visibility.Hidden;          
        }

第三章、控件显示/隐藏的判断条件

https://blog.youkuaiyun.com/DingChengTian/article/details/81912205

https://www.cnblogs.com/xinaixia/p/5518813.html

        对比第一个问题,我们发现第二个问题,Visibility属性内部多了一个Converter属性。其用来判断比如文本控件输入的内容是否合法。

       自己建立一个Window.xaml,然后加载下面的文件,就知道如何用了。这个截图的红色圈圈部分,都用到了,Visibility属性的Converter属性:

3.1、界面

Page.xaml

<Page x:Class="KeenRay.NetworkConfig"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:KeenRay"
      xmlns:converter="clr-namespace:KeenRay.PublicData"
      mc:Ignorable="d" 
      d:DesignHeight="1080" d:DesignWidth="1920"
      Title="NetworkConfig">
    <Page.Resources>
        <converter:RFBodyIDConverter x:Key="textCheckConverter"/>
        <converter:NetworkConfigConverter x:Key="enableConverter"/>
        <converter:NetworkConfigPortConverter x:Key="portConverter"/>
        <converter:NetworkConfigIPConverter x:Key="ipConverter"/>
        <converter:RefreshTimeVisibilityConverter x:Key="timeVisibleConverter"/>
    </Page.Resources>

    <Viewbox StretchDirection="Both" Stretch="Fill">
        <Grid Background="#dbdce1" Width="1844" Height="972">
            <Grid.RowDefinitions>
                <RowDefinition Height="488"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="439"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <!--存储通讯配置-->
            <Grid Margin="6,7,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="34"></RowDefinition>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <!--标题-->
                <Grid Grid.Row="0">
                    <Grid.Background>
                        <ImageBrush ImageSource="../Icon/SystemSetPage/Background/Storage_Title.png"/>
                    </Grid.Background>
                    <Label Content="存储通讯配置" Margin="5,0,0,0" VerticalAlignment="Center"></Label>
                </Grid>

                <!--内容-->
                <Canvas Grid.Row="1">
                    <Canvas.Background>
                        <ImageBrush ImageSource="../Icon/SystemSetPage/Background/Storage_Content.png"/>
                    </Canvas.Background>
                    <TextBlock Text="AETitle" Canvas.Left="95" Canvas.Top="47"></TextBlock>
                    <TextBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="40" VerticalContentAlignment="Center" Name="tbk_StorageAETitle" Text="{Binding StorageAETitle}" Style="{StaticResource TextBoxStyle}"/>
                    <Label Content="*" Foreground="Red" Canvas.Left="335" Canvas.Top="42" Visibility="{Binding ElementName=tbk_StorageAETitle,Path=Text,Converter={StaticResource textCheckConverter}}"></Label>

                    <TextBlock Text="IP地址" Canvas.Left="95" Canvas.Top="92"></TextBlock>
                    <TextBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="85" VerticalContentAlignment="Center" Name="tbk_StorageIP" Text="{Binding StorageIP}" Style="{StaticResource TextBoxStyle}"/>
                    <Label Content="*" Foreground="Red" Canvas.Left="335" Canvas.Top="87" Visibility="{Binding ElementName=tbk_StorageIP,Path=Text,Converter={StaticResource ipConverter}}"></Label>

                    <TextBlock Text="端口号" Canvas.Left="95" Canvas.Top="137"></TextBlock>
                    <TextBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="130" VerticalContentAlignment="Center" Name="tbk_StoragePort" Text="{Binding StoragePort}" Style="{StaticResource TextBoxStyle}"/>
                    <Label Content="{Binding ElementName=tbk_StoragePort,Path=Text,Converter={StaticResource portConverter}}" Foreground="Red" Canvas.Left="335" Canvas.Top="132"></Label>

                    <TextBlock Text="语法" Canvas.Left="95" Canvas.Top="182"></TextBlock>
                    <ComboBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="175" VerticalContentAlignment="Center" Style="{StaticResource ComboBoxStyle}" IsReadOnly="True" ItemsSource="{Binding StorageGrammar}" SelectedIndex="{Binding StorageGrammarIndex}"/>
                    <TextBlock Text="发送模式" Canvas.Left="95" Canvas.Top="227"></TextBlock>
                    <ComboBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="220" VerticalContentAlignment="Center" Style="{StaticResource ComboBoxStyle}" IsReadOnly="True" ItemsSource="{Binding SendMode}" SelectedIndex="{Binding SendModeIndex}"/>
                    <TextBlock Text="是否启用" Canvas.Left="95" Canvas.Top="272"></TextBlock>
                    <ComboBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="265" VerticalContentAlignment="Center" Style="{StaticResource ComboBoxStyle}" IsReadOnly="True" ItemsSource="{Binding IsStorageEnable}" SelectedIndex="{Binding IsStorageEnableIndex}"/>

                    <CheckBox Canvas.Left="110" Canvas.Top="317" Content="启动存储确认" Style="{StaticResource CheckBoxStyle}" IsChecked="{Binding IsEnableStorageConfirm}"></CheckBox>
                    <CheckBox Canvas.Left="255" Canvas.Top="317" Content="标注嵌入" Style="{StaticResource CheckBoxStyle}" IsChecked="{Binding IsAnnotationEmbeded}"></CheckBox>

                    <Button Width="66" Height="28" Content="增加" Canvas.Left="60" Canvas.Top="368" Style="{StaticResource StyleButton}" Name="btn_AddStorage" Click="btn_AddStorage_Click"/>
                    <Button Width="66" Height="28" Content="修改" Canvas.Left="148" Canvas.Top="368" Style="{StaticResource StyleButton}" Name="btn_ModifyStorage" Click="btn_ModifyStorage_Click"/>
                    <Button Width="66" Height="28" Content="删除" Canvas.Left="236" Canvas.Top="368" Style="{StaticResource StyleButton}" Name="btn_DeleteStorage" Click="btn_DeleteStorage_Click"/>
                    <Button Width="66" Height="28" Content="测试" Canvas.Left="324" Canvas.Top="368" Style="{StaticResource StyleButton}" Name="btn_TestStorage" Click="btn_TestStorage_Click"/>
                </Canvas>
            </Grid>

            <!--存储通讯配置列表-->
            <Grid Grid.Row="0" Grid.Column="1" Margin="0,9.1,7,-2">
                <ListView Grid.Row="0" Grid.Column="1" Style="{StaticResource ListViewStyle1}" Name="listview_Storage" ItemContainerStyle="{StaticResource ListViewItemContainerStyle}" SelectionChanged="listview_Storage_SelectionChanged" MouseDoubleClick="listview_Storage_MouseDoubleClick">
                    <ListView.View>
                        <GridView ColumnHeaderContainerStyle="{StaticResource DefaultGridViewColumnHeader}">
                            <GridViewColumn Header="AETitle" Width="300" DisplayMemberBinding="{Binding AETitle}"/>
                            <GridViewColumn Header="IP地址" Width="300" DisplayMemberBinding="{Binding IP}"/>
                            <GridViewColumn Header="端口" Width="300" DisplayMemberBinding="{Binding Port}"/>
                            <GridViewColumn Header="存储启用" Width="300" DisplayMemberBinding="{Binding StorageFlag,Converter={StaticResource enableConverter}}"/>
                        </GridView>
                    </ListView.View>
                </ListView>
            </Grid>

            <!--WorkList通讯配置-->
            <Grid Grid.Row="1" Grid.Column="0" Margin="6,0,0,7">
                <Grid.RowDefinitions>
                    <RowDefinition Height="34"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>

                <!--标题-->
                <Grid Grid.Row="0">
                    <Grid.Background>
                        <ImageBrush ImageSource="../Icon/SystemSetPage/Background/Storage_Title.png"/>
                    </Grid.Background>
                    <Label Content="WorkList通讯配置" Margin="5,0,0,0" VerticalAlignment="Center"></Label>
                </Grid>

                <!--内容-->
                <Canvas Grid.Row="1">
                    <Canvas.Background>
                        <ImageBrush ImageSource="../Icon/SystemSetPage/Background/Storage_Content.png"/>
                    </Canvas.Background>

                    <TextBlock Text="AETitle" Canvas.Left="95" Canvas.Top="47"></TextBlock>
                    <TextBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="40" VerticalContentAlignment="Center" Name="tbk_WorkListAETitle" Text="{Binding WorkListAETitle}" Style="{StaticResource TextBoxStyle}"/>
                    <Label Content="*" Foreground="Red" Canvas.Left="335" Canvas.Top="42" Visibility="{Binding ElementName=tbk_WorkListAETitle,Path=Text,Converter={StaticResource textCheckConverter}}"></Label>

                    <TextBlock Text="IP地址" Canvas.Left="95" Canvas.Top="92"></TextBlock>
                    <TextBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="85" VerticalContentAlignment="Center" Name="tbk_WorkListIP" Text="{Binding WorkListIP}" Style="{StaticResource TextBoxStyle}"/>
                    <Label Content="*" Foreground="Red" Canvas.Left="335" Canvas.Top="87" Visibility="{Binding ElementName=tbk_WorkListIP,Path=Text,Converter={StaticResource ipConverter}}"></Label>

                    <TextBlock Text="端口号" Canvas.Left="95" Canvas.Top="137"></TextBlock>
                    <TextBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="130" VerticalContentAlignment="Center" Name="tbk_WorkListPort" Text="{Binding WorkListPort}" Style="{StaticResource TextBoxStyle}"/>
                    <Label Content="{Binding ElementName=tbk_WorkListPort,Path=Text,Converter={StaticResource portConverter}}" Foreground="Red" Canvas.Left="335" Canvas.Top="132"></Label>

                    <TextBlock Text="设备过滤" Canvas.Left="95" Canvas.Top="182"></TextBlock>
                    <ComboBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="175" VerticalContentAlignment="Center" Style="{StaticResource ComboBoxStyle}" IsReadOnly="True" ItemsSource="{Binding CheckType}" SelectedIndex="{Binding CheckTypeIndex}"/>
                    <TextBlock Text="自动刷新" Canvas.Left="95" Canvas.Top="227"></TextBlock>
                    <ComboBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="220" VerticalContentAlignment="Center" Style="{StaticResource ComboBoxStyle}" IsReadOnly="True" ItemsSource="{Binding AutoRefresh}" SelectedIndex="{Binding AutoRefreshIndex}" Name="combox_AutoRefresh"/>
                    <!--<TextBlock Text="时间" Canvas.Left="338" Canvas.Top="227" Visibility="{Binding ElementName=combox_AutoRefresh,Path=SelectedIndex,Converter={StaticResource timeVisibleConverter}}"></TextBlock>-->
                    <ComboBox Width="70" Height="28" Canvas.Left="348" Canvas.Top="220" VerticalContentAlignment="Center" Style="{StaticResource ComboBoxStyle}" 
                              IsReadOnly="True" 
                              ItemsSource="{Binding ManualRefreshTime}" 
                              SelectedIndex="{Binding ManualRefreshTimeIndex}"
                              Visibility="{Binding ElementName=combox_AutoRefresh,Path=SelectedIndex,Converter={StaticResource timeVisibleConverter}}"/>
                    <!--<TextBlock Text="秒" Canvas.Left="417" Canvas.Top="227" Visibility="{Binding ElementName=combox_AutoRefresh,Path=SelectedIndex,Converter={StaticResource timeVisibleConverter}}"/>-->
                    <TextBlock Text="是否启用" Canvas.Left="95" Canvas.Top="272"></TextBlock>
                    <ComboBox Width="173" Height="28" Canvas.Left="162" Canvas.Top="265" VerticalContentAlignment="Center" Style="{StaticResource ComboBoxStyle}" IsReadOnly="True" ItemsSource="{Binding IsWorkListEnable}" SelectedIndex="{Binding IsWorkListEnableIndex}"/>

                    <CheckBox Canvas.Left="110" Canvas.Top="317" Content="启动MMPS" Style="{StaticResource CheckBoxStyle}" IsChecked="{Binding IsEnableMPPS}"></CheckBox>

                    <Button Width="66" Height="28" Content="增加" Canvas.Left="60" Canvas.Top="368" Style="{StaticResource StyleButton}" Name="btn_AddWorkList" Click="btn_AddWorkList_Click"/>
                    <Button Width="66" Height="28" Content="修改" Canvas.Left="148" Canvas.Top="368" Style="{StaticResource StyleButton}" Name="btn_ModifyWorkList" Click="btn_ModifyWorkList_Click"/>
                    <Button Width="66" Height="28" Content="删除" Canvas.Left="236" Canvas.Top="368" Style="{StaticResource StyleButton}" Name="btn_DeleteWorkList" Click="btn_DeleteWorkList_Click"/>
                    <Button Width="66" Height="28" Content="测试" Canvas.Left="324" Canvas.Top="368" Style="{StaticResource StyleButton}" Name="btn_TestWorkList" Click="btn_TestWorkList_Click"/>
                </Canvas>
            </Grid>

            <!--WorkList通讯配置列表-->
            <Grid Grid.Row="1" Grid.Column="1" Margin="0,2,7,4">
                <ListView Grid.Row="1" Grid.Column="1" Style="{StaticResource ListViewStyle1}" Name="listview_WorkList" ItemContainerStyle="{StaticResource ListViewItemContainerStyle}" SelectionChanged="listview_WorkList_SelectionChanged" MouseDoubleClick="listview_WorkList_MouseDoubleClick">
                    <ListView.View>
                        <GridView ColumnHeaderContainerStyle="{StaticResource DefaultGridViewColumnHeader}">
                            <GridViewColumn Header="AETttle" Width="300" DisplayMemberBinding="{Binding AETitle}"/>
                            <GridViewColumn Header="IP地址" Width="300" DisplayMemberBinding="{Binding IP}"/>
                            <GridViewColumn Header="端口" Width="300" DisplayMemberBinding="{Binding Port}"/>
                            <GridViewColumn Header="WorkList启用" Width="300" DisplayMemberBinding="{Binding WorkFlag,Converter={StaticResource enableConverter}}"/>
                        </GridView>
                    </ListView.View>
                </ListView>
            </Grid>
        </Grid>
    </Viewbox>
</Page>

3.2、判断显示条件

        文本控件、按钮控件或者的列表的控件的某个字段是否显示,往往需要判断该控件的输入是否符合某种条件。Visibility中的Converter常用来判断:

  • 合法性输入——若是符合某种条件,那么红色的星号就显示。若是不符合,那么就一直出现红色的星号
  • 条件输入——比如列表的控件的某字段 IsStart== 1,经过转换后,就出现 “启用”的字体在界面上。 IsStart== 0,则出现“不启用”

   请看下面的代码(与3.1呼应,类的名字命名不是很规范,你知道如何用就行)

RFBodyIDConverter.cs:

 class RFBodyIDConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string str = "[!!@#$%\\^&*()./、~`·\\-_=\\+——><《》\\??]+";
            Regex regex = new Regex(str);
            if (string.IsNullOrEmpty(value.ToString().Trim()))
            {
                return Visibility.Visible;
            }
            else
            {
                if ((regex.IsMatch(value.ToString())))
                    return Visibility.Visible;
                return Visibility.Hidden;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

NetworkConfigConverter.CS:

class NetworkConfigConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value.ToString() == "0")
                return "不启用";
            else
                return "启用";
                    
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

NetworkConfigPortConverter.cs

class NetworkConfigPortConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value.ToString() == "")
                return "*";
            int port = 0;
            if(Int32.TryParse(value.ToString(),out port))
            {
                if (port > 1024 && port < 65536)
                    return "";
                else
                    return "1025-65535";
            }
            else
            {
                return "1025-65535";
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

NetworkConfigIPConverter.cs:

class NetworkConfigIPConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if(value == null)
            {
                return System.Windows.Visibility.Visible;
            }
            else
            {
                if (string.IsNullOrEmpty(value.ToString()))
                    return System.Windows.Visibility.Visible;
                else
                {
                    string regex = @"^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$";
                    if(!System.Text.RegularExpressions.Regex.IsMatch(value.ToString(),regex))
                    {
                        return System.Windows.Visibility.Visible;
                    }
                }
            }
            return System.Windows.Visibility.Hidden;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

RefreshTimeVisibilityConverter.cs:

class RefreshTimeVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value.ToString() == "0")
                return System.Windows.Visibility.Hidden;
            else
                return System.Windows.Visibility.Visible;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我爱AI

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值