rounded-corners 相关问题

用户界面设计特征的名称，其替换在两条垂直线的端点处形成的90度角。

我不懂WPF，现在正在学习。我正在寻找 WPF 中的圆角 TextBox。所以我搜索了Google并找到了一段XAML：我不了解WPF，现在正在学习。我在 WPF 中寻找圆角TextBox。所以我在Google上搜索并找到了一块XAML： <!–Rounded Corner TextBoxes–> <ControlTemplate x:Key=”RoundTxtBoxBaseControlTemplate” TargetType=”{x:Type Control}”> <Border Background=”{TemplateBinding Background}” x:Name=”Bd” BorderBrush=”{TemplateBinding BorderBrush}” BorderThickness=”{TemplateBinding BorderThickness}” CornerRadius=”6″> <ScrollViewer x:Name=”PART_ContentHost”/> </Border> <ControlTemplate.Triggers> <Trigger Property=”IsEnabled” Value=”False”> <Setter Property=”Background” Value=”{DynamicResource {x:Static SystemColors.ControlBrushKey}}” TargetName=”Bd”/> <Setter Property=”Foreground” Value=”{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}”/> </Trigger> <Trigger Property=”Width” Value=”Auto”> <Setter Property=”MinWidth” Value=”100″/> </Trigger> <Trigger Property=”Height” Value=”Auto”> <Setter Property=”MinHeight” Value=”20″/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> 所以请告诉我将其粘贴到哪里XAML。请详细帮助我。我是 WPF 的初学者。 @Smolla 在对 @Daniel Casserly 的回答的评论中给出了更好的答案： <TextBox Text="TextBox with CornerRadius"> <TextBox.Resources> <Style TargetType="{x:Type Border}"> <Setter Property="CornerRadius" Value="3"/> </Style> </TextBox.Resources> </TextBox> 如果您希望 TextBox 和 ListBox 的所有边框都有圆角，请将样式放入您的 Window 或 App 中<Resources>。在 WPF 中，您可以修改或重新创建控件的外观。因此，如果您的示例他们所做的是通过修改现有 ControlTemplate 的 TextBox 来更改文本框的外观。因此，要查看和探索这段代码，只需使用下面的代码 <Window x:Class="WpfApplication4.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Window.Resources> <ControlTemplate x:Key="TextBoxBaseControlTemplate" TargetType="{x:Type TextBoxBase}"> <Border Background="{TemplateBinding Background}" x:Name="Bd" BorderBrush="Black" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10"> <ScrollViewer x:Name="PART_ContentHost"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Bd"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> </Trigger> <Trigger Property="Width" Value="Auto"> <Setter Property="MinWidth" Value="100"/> </Trigger> <Trigger Property="Height" Value="Auto"> <Setter Property="MinHeight" Value="20"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Window.Resources> <Grid> <TextBox Template="{StaticResource TextBoxBaseControlTemplate}" Height="25" Margin="5"></TextBox> </Grid> 因此，我们在窗口的资源部分声明了一个静态资源，并在 Template 的 TextBox 属性中使用了 Resource TextBoxBaseControlTemplate 作为 Template="{StaticResource TextBoxBaseControlTemplate}" 。自定义 WPF 控件的模板只需参考此文档即可获得想法 http://msdn.microsoft.com/en-us/magazine/cc163497.aspx 您可以使用以下样式将所有文本框更改为圆角： <Style TargetType="{x:Type TextBox}"> <Style.Resources> <Style TargetType="{x:Type Border}"> <Setter Property="CornerRadius" Value="3" /> </Style> </Style.Resources> </Style> 受到以下答案的启发：https://stackoverflow.com/a/13858357/3387453 只需将文本框的 BorderThickness 设置为零即可在文本框周围添加边框。 <Border BorderThickness="1" BorderBrush="Black" CornerRadius="10" Padding="2" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBox Text="Hello ! " BorderThickness="0"/> </Border> 输出如图所示！这个问题在 msdn 上得到了很好的讨论： http://social.msdn.microsoft.com/forums/en-US/wpf/thread/549775ed-1c2a-4911-9078-d9c724294fb3/ 尝试那里的解决方案，它们非常详细，并且足够详细，让您知道将代码放在哪里。您可以使用附加属性来设置TextBox边框半径（同样适用于按钮）。为附加属性创建类 public class CornerRadiusSetter { public static CornerRadius GetCornerRadius(DependencyObject obj) => (CornerRadius)obj.GetValue(CornerRadiusProperty); public static void SetCornerRadius(DependencyObject obj, CornerRadius value) => obj.SetValue(CornerRadiusProperty, value); public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.RegisterAttached(nameof(Border.CornerRadius), typeof(CornerRadius), typeof(CornerRadiusSetter), new UIPropertyMetadata(new CornerRadius(), CornerRadiusChangedCallback)); public static void CornerRadiusChangedCallback(object sender, DependencyPropertyChangedEventArgs e) { Control control = sender as Control; if (control == null) return; control.Loaded -= Control_Loaded; control.Loaded += Control_Loaded; } private static void Control_Loaded(object sender, EventArgs e) { Control control = sender as Control; if (control == null || control.Template == null) return; control.ApplyTemplate(); Border border = control.Template.FindName("border", control) as Border; if (border == null) return; border.CornerRadius = GetCornerRadius(control); } } 然后您可以使用附加属性语法来设置多个文本框的样式，而无需重复样式： <TextBox local:CornerRadiusSetter.CornerRadius="10" /> <TextBox local:CornerRadiusSetter.CornerRadius="5, 0, 0, 5" /> <TextBox local:CornerRadiusSetter.CornerRadius="10, 4, 18, 7" /> 以困难的方式去做。在 Visual Studio 中创建一个新的空 WPF 项目。将 TextBox 添加到主 Window。然后将鼠标放在 TextBox 上，右键单击并选择编辑模板、编辑副本...。在出现的对话框中，选择应用于全部和此文档。您现在拥有 TextBox 模板的副本。现在看看名称为 Border 的 border。只需添加一个 CornerRadius 即可。接下来将此代码复制/粘贴到您的App.xaml中的/Application/Application.Resources/ResourceDictionary中。它比其他解决方案需要更多的时间，它更复杂，但更干净，一旦你掌握了这个过程，你就可以使用 WPF 做任何你想做的事情。这读起来很有趣。

wpf textbox rounded-corners

回答 7 投票 0

如何制作半圆角边框？

我有一个 RoundPanel 类，它扩展了 JPanel 并提供圆形外观。 JPanel user_icon = new RoundPanel(8); user_icon.setBackground(Color.decode("#363b41")); user_icon.setBorde...

java swing jpanel jtextfield rounded-corners

回答 1 投票 0

如何在 Qt 中的弹出窗口小部件上创建平滑的圆角

我有一个带有 windowsflag Qt::Popup 设置的小部件，我正在尝试创建平滑的圆角。我尝试使用样式表，但角的透明部分变成黑色。一样的

windows qt qt5 styling rounded-corners

回答 1 投票 0

圆形侧边菜单栏角

我正在使用 C++ 开发 Qt 小部件应用程序。在我的主窗口中，我有一个 QGridLayout，其中包含 3 个主要小部件：顶部的标题、左侧的侧边菜单和右侧的正文。我主要用...

c++ qt widget rounded-corners qtstylesheets

回答 1 投票 0

IE8 中的 CSS 圆角无标题页面...</desc> <question vote="58"> 我在 IE8 中遇到圆角问题。我尝试了几种方法都没有成功。 这是我的代码： <pre><code><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; padding: 2px; margin: 2px; color: #505050; line-height: normal; } p { margin: 4px; } .categoryheading3 { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } .leftcolumn { width: 174px; padding: 8px; float: left; display: inline-block; background-color: transparent; /*--min-height: 500px*/ overflow: hidden; } .lefttop { display: inline-block; width: inherit; margin: 0 5px 2em 0; float: left; width: 160px; background-color: #FFFFFF; border: 2px solid #297BB6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } </style> </head> <body> <div class="leftcolumn"> <div class="lefttop"> <H4 class="categoryheading3">Heading</H4> sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </div> </div> </body> </html> </code></pre> 这会在 Firefox 中产生： <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1Fyc1BPLmpwZw==" alt="firefox example"/> 但是在 IE8 中是这样的： <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1h6dUNYLmpwZw==" alt="IE8 makes me sad"/> 如果有人有任何建议，我将不胜感激！ 编辑：约瑟夫建议使用pie.htc提供了帮助，但是我仍然在为这个元素不起作用而苦苦挣扎： <pre><code>.categoryheading3 { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; behavior: url(PIE.htc); background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } </code></pre> </question> <answer tick="true" vote="69"> Internet Explorer（版本 9 以下）本身不支持圆角。 有一个令人惊叹的脚本会神奇地为您添加它：<a href="http://css3pie.com/" rel="noreferrer">CSS3 PIE</a>。 我已经使用了很多次，效果惊人。 </answer> <answer tick="false" vote="33"> <h1><a href="http://davidwalsh.name/css-rounded-corners" rel="nofollow noreferrer">IE8 中的圆角</a></h1> Internet Explorer 8（及更早版本）不支持圆角，但是还有您可以考虑的其他解决方案： <ul> <li>使用圆角<pre><code>Images</code></pre>代替（<a href="http://www.generateit.net/rounded-corner/" rel="nofollow noreferrer">这个</a>生成器是一个很好的资源） </li> <li>使用<pre></pre>此处<a href="http://jquery.malsup.com/corner" rel="nofollow noreferrer">中的</a><code>jQuery Corner plugin</code> </li> <li>使用一个非常好的脚本，称为<pre><code>CSS3 PIE</code></pre>，来自<a href="http://css3pie.com" rel="nofollow noreferrer">这里</a>（优点和缺点<a href="http://css-plus.com/2011/05/ie-and-rounded-corners/" rel="nofollow noreferrer">这里</a>） </li> <li>从<pre></pre>这里<a href="http://www.cssjuice.com/25-rounded-corners-techniques-with-css/" rel="nofollow noreferrer">结帐</a><code>CSS Juice</code> </li> <li>另一个好的脚本是<pre><code>IE-CSS3</code></pre>，来自<a href="http://fetchak.com/ie-css3/" rel="nofollow noreferrer">这里</a> </li> </ul> 尽管 CSS PIE 是最流行的解决方案，我建议您查看所有其他解决方案并选择最适合您需求的解决方案。 我希望它有用。祝你好运！ </answer> <answer tick="false" vote="4"> 看到这篇文章后，我不知道 css3pie.com，一个非常有用的网站： 但是经过测试，它对我来说也不起作用。但是我发现将其包装在 .PHP 文件中效果很好。所以代替： <pre><code>behavior: url(PIE.htc); </code></pre> 用这个： <pre><code>behavior: url(PIE.php); </code></pre> 我把我的放在一个名为 jquery 的文件夹中，所以我的是： <pre><code> behavior: url(jquery/PIE.php); </code></pre> 所以去他们的下载或在这里获取： <a href="http://css3pie.com/download-latest" rel="nofollow">http://css3pie.com/download-latest</a> 并使用他们的 PHP 文件。在 PHP 文件中，它解释了某些服务器未配置为正确使用 .HTC。这就是我遇到的问题。 尝试一下！我做了，它有效。希望这也能帮助其他人。 </answer> <answer tick="false" vote="2"> <a href="http://fetchak.com/ie-css3/" rel="nofollow">http://fetchak.com/ie-css3/</a> 适用于 IE 6+。如果 css3pie 不适合你，请使用这个。 </answer> <answer tick="false" vote="2"> PIE.htc 对我来说非常有用（<a href="http://css3pie.com/" rel="nofollow">http://css3pie.com/</a>），但有一个问题： 您应该写入PIE.htc的绝对路径。当我使用相对路径时，它对我不起作用。 </answer> <answer tick="false" vote="0"> 由于 Internet Explorer 本身不支持圆角。因此，更好的跨浏览器处理方法是在角落使用圆角图像。许多著名网站都使用这种方法。 您还可以在网络上找到圆形图像生成器。其中一个链接是 <a href="http://www.generateit.net/rounded-corner/" rel="nofollow">http://www.generateit.net/rounded-corner/</a> </answer> </body></html>

我在 IE8 中遇到圆角问题。我尝试了几种方法但没有成功。这是我的代码：无标题页面...</desc> <question vote="58"> 我在 IE8 中遇到圆角问题。我尝试了几种方法都没有成功。 这是我的代码： <pre><code><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; padding: 2px; margin: 2px; color: #505050; line-height: normal; } p { margin: 4px; } .categoryheading3 { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } .leftcolumn { width: 174px; padding: 8px; float: left; display: inline-block; background-color: transparent; /*--min-height: 500px*/ overflow: hidden; } .lefttop { display: inline-block; width: inherit; margin: 0 5px 2em 0; float: left; width: 160px; background-color: #FFFFFF; border: 2px solid #297BB6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } </style> </head> <body> <div class="leftcolumn"> <div class="lefttop"> <H4 class="categoryheading3">Heading</H4> sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </div> </div> </body> </html> </code></pre> 这会在 Firefox 中产生： <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1Fyc1BPLmpwZw==" alt="firefox example"/> 但是在 IE8 中是这样的： <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1h6dUNYLmpwZw==" alt="IE8 makes me sad"/> 如果有人有任何建议，我将不胜感激！ 编辑：约瑟夫建议使用pie.htc提供了帮助，但是我仍然在为这个元素不起作用而苦苦挣扎： <pre><code>.categoryheading3 { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; behavior: url(PIE.htc); background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } </code></pre> </question> <answer tick="true" vote="69"> Internet Explorer（版本 9 以下）本身不支持圆角。 有一个令人惊叹的脚本会神奇地为您添加它：<a href="http://css3pie.com/" rel="noreferrer">CSS3 PIE</a>。 我已经使用了很多次，效果惊人。 </answer> <answer tick="false" vote="33"> <h1><a href="http://davidwalsh.name/css-rounded-corners" rel="nofollow noreferrer">IE8 中的圆角</a></h1> Internet Explorer 8（及更早版本）不支持圆角，但是还有您可以考虑的其他解决方案： <ul> <li>使用圆角<pre><code>Images</code></pre>代替（<a href="http://www.generateit.net/rounded-corner/" rel="nofollow noreferrer">这个</a>生成器是一个很好的资源） </li> <li>使用<pre></pre>此处<a href="http://jquery.malsup.com/corner" rel="nofollow noreferrer">中的</a><code>jQuery Corner plugin</code> </li> <li>使用一个非常好的脚本，称为<pre><code>CSS3 PIE</code></pre>，来自<a href="http://css3pie.com" rel="nofollow noreferrer">这里</a>（优点和缺点<a href="http://css-plus.com/2011/05/ie-and-rounded-corners/" rel="nofollow noreferrer">这里</a>） </li> <li>从<pre></pre>这里<a href="http://www.cssjuice.com/25-rounded-corners-techniques-with-css/" rel="nofollow noreferrer">结帐</a><code>CSS Juice</code> </li> <li>另一个好的脚本是<pre><code>IE-CSS3</code></pre>，来自<a href="http://fetchak.com/ie-css3/" rel="nofollow noreferrer">这里</a> </li> </ul> 尽管 CSS PIE 是最流行的解决方案，我建议您查看所有其他解决方案并选择最适合您需求的解决方案。 我希望它有用。祝你好运！ </answer> <answer tick="false" vote="4"> 看到这篇文章后，我不知道 css3pie.com，一个非常有用的网站： 但是经过测试，它对我来说也不起作用。但是我发现将其包装在 .PHP 文件中效果很好。所以代替： <pre><code>behavior: url(PIE.htc); </code></pre> 用这个： <pre><code>behavior: url(PIE.php); </code></pre> 我把我的放在一个名为 jquery 的文件夹中，所以我的是： <pre><code> behavior: url(jquery/PIE.php); </code></pre> 所以去他们的下载或在这里获取： <a href="http://css3pie.com/download-latest" rel="nofollow">http://css3pie.com/download-latest</a> 并使用他们的 PHP 文件。在 PHP 文件中，它解释了某些服务器未配置为正确使用 .HTC。这就是我遇到的问题。 尝试一下！我做了，它有效。希望这也能帮助其他人。 </answer> <answer tick="false" vote="2"> <a href="http://fetchak.com/ie-css3/" rel="nofollow">http://fetchak.com/ie-css3/</a> 适用于 IE 6+。如果 css3pie 不适合你，请使用这个。 </answer> <answer tick="false" vote="2"> PIE.htc 对我来说非常有用（<a href="http://css3pie.com/" rel="nofollow">http://css3pie.com/</a>），但有一个问题： 您应该写入PIE.htc的绝对路径。当我使用相对路径时，它对我不起作用。 </answer> <answer tick="false" vote="0"> 由于 Internet Explorer 本身不支持圆角。因此，更好的跨浏览器处理方法是在角落使用圆角图像。许多著名网站都使用这种方法。 您还可以在网络上找到圆形图像生成器。其中一个链接是 <a href="http://www.generateit.net/rounded-corner/" rel="nofollow">http://www.generateit.net/rounded-corner/</a> </answer> </body></html>

css internet-explorer internet-explorer-8 rounded-corners

回答 0 投票 0

Python中的IOS角平滑

我正在做一个涉及视频帧操作的项目，需求之一是为帧添加平滑的圆角。我对如何添加圆角进行了一些研究...

python ios python-imaging-library drawing rounded-corners

回答 1 投票 0

如何使用vue填充圆桌行之间的空间？

我正在使用 Vue 中的组件，并尝试将每一行变成基本上圆形的药丸。目前我有这个：（https://i.stack.imgur.com/XYn7n.png）我希望角的内部部分是

vue.js rounded-corners v-data-table

回答 1 投票 0

如何在输入栏底部制作非圆角线

我正在制作流利风格的输入栏这就是我的进步但是，我希望它的线条没有圆角，并且当焦点放在它上时它会改变它的高度（它移动布局）我能怎么做？这是我的代码↓...