WPF 中的 Mac 风格 DockBar 功能
我正在尝试模仿 Mac 上的 DockBar 或 ObjectBar。在此过程中,我希望学习 WPF 自定义控件,并希望为我和社区创建一个可用的控件。到目前为止,我的这个有点
<Window x:Class="WPFMacStyleTBar.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="356" Width="577">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" x:Name="btnHome" Background="Transparent" BorderBrush="Transparent" Margin="0,0,47,0" Foreground="Transparent">
<Button.Content>
<Image Source="C:\Vikram\Projects\WPFMacStyleTBar\WPFMacStyleTBar\Images\Home.png"></Image>
</Button.Content>
</Button>
<Button Grid.Column="2" x:Name="btnGlobe" Background="Transparent" BorderBrush="Transparent" Margin="0,0,47,0" Foreground="Transparent">
<Button.Content>
<Image Source="C:\Vikram\Projects\WPFMacStyleTBar\WPFMacStyleTBar\Images\Globe.png"></Image>
</Button.Content>
</Button>
<Button Grid.Column="3" x:Name="btnNotes" Background="Transparent" BorderBrush="Transparent" Margin="0,0,49,0" Foreground="Transparent">
<Button.Content>
<Image Source="C:\Vikram\Projects\WPFMacStyleTBar\WPFMacStyleTBar\Images\Notes.png"></Image>
</Button.Content>
</Button>
</Grid>
</Grid>
简陋,但我觉得对于初学者来说这应该没问题。我面临的问题是即使将背景和边框设置为透明后,按钮边框仍然显示。最重要的是,我想要按钮将区域裁剪为图像的区域。我将不胜感激关于如何做到这一点的帮助。
编辑
我找到了我正在寻找的东西这里
I am trying to imitate the DockBar on Mac or the ObjectBar. In the process I hope to learn WPF Custom Controls and hopefully create a usable control for me and the community. So far I have this
<Window x:Class="WPFMacStyleTBar.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="356" Width="577">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" x:Name="btnHome" Background="Transparent" BorderBrush="Transparent" Margin="0,0,47,0" Foreground="Transparent">
<Button.Content>
<Image Source="C:\Vikram\Projects\WPFMacStyleTBar\WPFMacStyleTBar\Images\Home.png"></Image>
</Button.Content>
</Button>
<Button Grid.Column="2" x:Name="btnGlobe" Background="Transparent" BorderBrush="Transparent" Margin="0,0,47,0" Foreground="Transparent">
<Button.Content>
<Image Source="C:\Vikram\Projects\WPFMacStyleTBar\WPFMacStyleTBar\Images\Globe.png"></Image>
</Button.Content>
</Button>
<Button Grid.Column="3" x:Name="btnNotes" Background="Transparent" BorderBrush="Transparent" Margin="0,0,49,0" Foreground="Transparent">
<Button.Content>
<Image Source="C:\Vikram\Projects\WPFMacStyleTBar\WPFMacStyleTBar\Images\Notes.png"></Image>
</Button.Content>
</Button>
</Grid>
</Grid>
It's a little rudimentary but I felt for starters this should be fine. The problem that I am facing are even after setting the background and the border to Transparent, the button border still shows up. On top of it I want to button region to cropped to that of the image. I would appreciate help on how this can be done.
EDIT
I found what I was looking for here
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我认为包裹面板(http://msdn.microsoft.com/en-us/library/system.windows.controls.wrappanel.aspx)将是比仅仅限制用户能够设置的按钮更明智的选择。
另外,您还可以为按钮创建一个样式,并将按钮大小绑定到图像的大小(在代码隐藏中实现检查以设置最大图像大小)。
至于不透明的按钮边框,我真的不知道为什么会发生这种情况。如果可能的话,发布屏幕截图;)
I think a wrap-panel (http://msdn.microsoft.com/en-us/library/system.windows.controls.wrappanel.aspx) would be a wiser choice than just limiting the buttons the user is able to set.
Also, you might as well create an style for your buttons and bind the button size to the image's size (Implement a check in the code-behind to set the max image size tho).
As for the non-transparent button borders, i dont really have a clue why that would of happen. Post a screenshot if possible ;)