如何实现winform 可隐藏导航栏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现winform 可隐藏导航栏相关的知识，希望对你有一定的参考价值。
如何用C#winform实现这样的类似于VS中工具箱这样的导航栏一样，可以隐藏，也可以显示
可不可以发到我的邮箱呢我的是vs2010版的不知兼不兼容，麻烦你了，WnLn25@qq.com
可以用自带的panle或窗体，可以提前设置panle或窗体的位置，也可以动态改变窗体的位置;收缩用api效果好一点，需要做几个控制收缩的按钮好触发；窗体动态改变位置大小,需要重绘窗体
using System.Runtime.InteropServices;
#region
//api
[DllImport("user32")]
private static extern bool AnimateWindow(IntPtr whnd, int dwtime, int dwflag);
//dwflag的取值如下
public const Int32 AW_HOR_POSITIVE = 0x00000001;
//从左到右显示
public const Int32 AW_HOR_NEGATIVE = 0x00000002;
//从右到左显示
public const Int32 AW_VER_POSITIVE = 0x00000004;
//从上到下显示
public const Int32 AW_VER_NEGATIVE = 0x00000008;
//从下到上显示
public const Int32 AW_CENTER = 0x00000010;
//若使用了AW_HIDE标志，则使窗口向内重叠，即收缩窗口；否则使窗口向外扩展，即展开窗口
public const Int32 AW_HIDE = 0x00010000;
//隐藏窗口，缺省则显示窗口
public const Int32 AW_ACTIVATE = 0x00020000;
//激活窗口。在使用了AW_HIDE标志后不能使用这个标志
public const Int32 AW_SLIDE = 0x00040000;
//使用滑动类型。缺省则为滚动动画类型。当使用AW_CENTER标志时，这个标志就被忽略
public const Int32 AW_BLEND = 0x00080000;
//透明度从高到低
#endregion
//从左到右 参数根据上面的替换实现不同的现实效果
AnimateWindow("控件或窗体名称".Handle, 1000, AW_SLIDE | AW_HIDE | AW_HOR_POSITIVE);
"控件或窗体名称".Show 参考技术A 你可以搜索一下dockpanel，是一个开源的控件，完全可以实现类似VS中的可以隐藏和拖拽的效果，如果你要我这里也有。本回答被提问者和网友采纳
如何在导航栏中舍入当前选项卡上方和下方的选项卡，除了当前选项卡之外，还隐藏导航栏
【中文标题】如何在导航栏中舍入当前选项卡上方和下方的选项卡，除了当前选项卡之外，还隐藏导航栏【英文标题】：how to round off the tabs above and below the current tab in the nav bar, also shadow the nav bar except the current tab 【发布时间】：2021-11-05 15:21:33 【问题描述】：我之前从未问过 css 问题，所以提前道歉。
这是我的导航栏目前的样子full sized image here
我真正想要实现的两件事：
-
当前选项卡正上方和下方的圆形选项卡
（在这张图片中是建议和关于我们）
在除当前选项卡之外的右侧隐藏导航栏
（顺便说一句，我正在使用 jinja2。由于当前选项卡不固定，因此无法对角进行硬编码）
我不知道 1。但我尝试了 2。这是不满意的结果：
想摆脱突兀的角落
这是我当前的样式表
:root
/* colour palette */
--cream : hsl(40, 100%, 96%);
--cream-light:hsl(40, 100%, 98%);
--coffee: hsl(40, 14%, 62%);
--purple: hsl(258, 14%, 62%);
--dark : hsl(109, 7%, 33%);
--green : hsl(128, 30%, 42%);
--green2: hsl(140, 15%, 55%);
--green2-dark: hsl(140, 11%, 36%);
/* */
--shadow-in: inset 1px .15rem .3rem -.1rem rgba(50, 50, 93, 0.25), inset 1px .1rem .2rem -.1rem rgba(0, 0, 0, 0.3), inset -1px -1px .3rem -.1rem rgba(50, 50, 93, 0.25), inset -1px -1px .2rem -.1rem rgba(0, 0, 0, 0.3);
--shadow-nav: .3rem 0 .6rem -.2rem rgba(50, 50, 93, 0.25), .2rem 0 .4rem -.2rem rgba(0, 0, 0, 0.3);
--shadow-current: inset .3rem .3rem .6rem -.2rem rgba(50, 50, 93, 0.25), inset .2rem .2rem .4rem -.2rem rgba(0, 0, 0, 0.3);
--shadow-hover: inset 1px .3rem .6rem -.2rem rgba(50, 50, 93, 0.25), inset 1px .2rem .4rem -.2rem rgba(0, 0, 0, 0.3), inset -1px -1px .6rem -.2rem rgba(50, 50, 93, 0.25), inset -1px -1px .4rem -.2rem rgba(0, 0, 0, 0.3);
/* themes */
--nav-bg : var(--green2-dark);
--nav-text : white;
--nav-hover: hsl(140, 11%, 27%);
--main : var(--cream );
--text : var(--dark );
--highlight: var(--green);
--card : var(--cream-light);
html, body
margin: 0;
font-size: 1.5vw;
background: var(--nav-bg);
transition: all .5s ease;
a
color: var(--text);
text-decoration: none;
a:hover
color: var(--green);
nav
position: fixed;
top: 0;
left: 0;
width: 18%;
height: 100vh;
/*box-shadow: var(--shadow-nav);*/
/*box-shadow: .3rem 0 .6rem rgba(50, 93, 50, 0.25), .2rem 0 .4rem rgba(0, 0, 0, 0.3);*/
background: var(--nav-bg);
nav h2
margin: 0;
padding: 10%;
padding-right: 0 !important;
height: 1.8rem;
background: var(--nav-bg);
color: var(--nav-text);
transition: margin .5s, padding .5s, border .5s, background .5s, color .3s;
/*nav div.current
width: 100%;
padding-right: .9rem;
background: linear-gradient(90deg, hsl(140, 11%, 36%) 50%, hsl(40, 100%, 96%) 50%);
nav div.current:hover
padding-right: 0;
*/
nav h2.current
margin-left: 5%;
padding-left: 5%;
border-radius: .5rem 0 0 .5rem;
box-shadow: var(--shadow-current);
background: var(--main);
color: var(--text);
nav h2:hover
margin: 0;
padding: 10%;
padding-left: 15%;
border-radius: 0;
box-shadow: var(--shadow-hover);
background: var(--nav-hover);
color: var(--nav-text);
main
padding-left: 22.5%;
padding-right: 7.5%;
min-height: 100vh;
background: var(--main);
color: var(--text);
display: flex;
flex-direction: column;
main h1
color: var(--green2);
footer
margin-top: auto;
margin-bottom: .35rem;
padding: .25rem;
padding-right: 2.5rem;
border-radius: .25rem;
font: .5rem sans-serif;
text-align: right;
background: hsl(40, 39%, 90%);
box-shadow: var(--shadow-in);
这是 layout.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Library</title>
<meta charset='UTF-8'>
</head>
<body>
<nav>
% include 'navigation.html' %
</nav>
<main>
% block main % % endblock %
<footer>Copyright 2021 mightbesimon | github.com/mightbesimon</footer>
</main>
</body>
</html>
这是navigation.html
% for url, name in (('/' , 'Home' ),
('/register' , 'Register' ),
('/login' , 'Login' ),
('/suggestions', 'Suggestions' ),
('/catalogue' , 'Our Catalogue'),
('/aboutus' , 'About Us' ),
('/contact' , 'Contact' ),
) %
<a href=" url ">
<!-- <div % if url_for(request.endpoint, **request.view_args)==url % class="current" % endif %> -->
<h2 % if url_for(request.endpoint, **request.view_args)==url % class="current" % endif %>
name
</h2>
<!-- </div> -->
</a>
% endfor %
【问题讨论】：
【参考方案1】：你可以试试
drop-shadow()（但它适用于任何半透明边缘 => 不幸的是文本）通过 filter 绘制阴影。
box-shadow 从.current 绘制导航background
overflow:hidden 在nav 上以避免阴影在main 上流血
position: relative 用于 h2 保持在阴影顶部 & static 用于.current
这是可能的更新的想法
:root
/* colour palette */
--cream: hsl(40, 100%, 96%);
--cream-light: hsl(40, 100%, 98%);
--coffee: hsl(40, 14%, 62%);
--purple: hsl(258, 14%, 62%);
--dark: hsl(109, 7%, 33%);
--green: hsl(128, 30%, 42%);
--green2: hsl(140, 15%, 55%);
--green2-dark: hsl(140, 11%, 36%);
/* */
--shadow-in: inset 1px 0.15rem 0.3rem -0.1rem rgba(50, 50, 93, 0.25),
inset 1px 0.1rem 0.2rem -0.1rem rgba(0, 0, 0, 0.3),
inset -1px -1px 0.3rem -0.1rem rgba(50, 50, 93, 0.25),
inset -1px -1px 0.2rem -0.1rem rgba(0, 0, 0, 0.3);
--shadow-nav: 0.3rem 0 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
0.2rem 0 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
--shadow-current: inset 0.3rem 0.3rem 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
inset 0.2rem 0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
--shadow-hover: inset 1px 0.3rem 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
inset 1px 0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3),
inset -1px -1px 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
inset -1px -1px 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
/* themes */
--nav-bg: var(--green2-dark);
--nav-text: white;
--nav-hover: hsl(140, 11%, 27%);
--main: var(--cream);
--text: var(--dark);
--highlight: var(--green);
--card: var(--cream-light);
html,
body
margin: 0;
font-size: 1.5vw;
background: var(--nav-bg);
transition: all 0.5s ease;
a
color: var(--text);
text-decoration: none;
a:hover
color: var(--green);
nav
position: fixed;
top: -1rem;
bottom: -1rem;
left: 0;
width: 18%;
padding: 1rem 0;
min-height:100vh;
overflow: hidden;
filter: drop-shadow(0.3rem 0.3rem 0.6rem);
nav h2
margin: 0;
padding: 10%;
padding-right: 0 !important;
height: 1.8rem;
transition: margin 0.5s, padding 0.5s, border 0.5s, background 0.5s,
color 0.3s;
position: relative;
color: var(--nav-text);
nav h2.current:hover
box-shadow: var(--shadow-hover), 0 0 0 100vw var(--nav-bg);
nav h2.current
margin-left: 5%;
padding-left: 5%;
border-radius: 0.5rem 0 0 0.5rem;
box-shadow: 0 0 0 100vmax var(--nav-bg);
color: var(--text);
position: static;
nav h2:hover
margin: 0;
padding: 10%;
padding-left: 15%;
border-radius: 0;
box-shadow: var(--shadow-hover);
background: var(--nav-hover);
color: var(--nav-text);
main
padding-left: 22.5%;
padding-right: 7.5%;
min-height: 100vh;
background: var(--main);
color: var(--text);
display: flex;
flex-direction: column;
main h1
color: var(--green2);
footer
margin-top: auto;
margin-bottom: 0.35rem;
padding: 0.25rem;
padding-right: 2.5rem;
border-radius: 0.25rem;
font: 0.5rem sans-serif;
text-align: right;
background: hsl(40, 39%, 90%);
box-shadow: var(--shadow-in);
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
注意：这个函数有点类似于
box-shadow属性。box-shadow属性在元素的整个框后面创建一个矩形阴影，而drop-shadow()过滤器函数创建一个符合图像本身形状（alpha 通道）的阴影。
【讨论】：
谢谢@G-Cyrillus :) 由于几周内没有其他人提供答案，因此我接受您的答案作为迄今为止最好和唯一的解决方案。干杯以上是关于如何实现winform 可隐藏导航栏的主要内容，如果未能解决你的问题，请参考以下文章