I have a toolbar
Code:
<ToolBarTray>
<ToolBar>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
</ToolBar>
</ToolBarTray>
On Image I only set the Source and on the Label I only set the Content.
However as the image shows, the buttons aren't sharing the same width. "Remove" button is wider than the others.
How can I make it so that all toolbar buttons will share the same width as the "Remove" button?
One way you could set the Width of all of your buttons at the same time, is to use a Setter in your ToolBar.Resources, like so:
<ToolBar>
<ToolBar.Resources>
<Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="Button">
<Setter Property="Width" Value="80"/>
</Style>
</ToolBar.Resources>
<Button>
...
<Button>
...
</ToolBar>
That way you don't need to manually set the width on each Button individually.
You could also use a Setter to set the Stretch property, like so:
<Setter Property="Stretch" Value="None"/>
Edit:
Apparently, according to https://stackoverflow.com/a/2406213/3101082, you need to ensure that you are setting the Style using the x:Key="{x:Static ToolBar.ButtonStyleKey}" in order for it to apply to ToolBar buttons. I have updated my answer to reflect this.
This will likely work, I haven't tested it but by specifying the width of the button and the image scaling, you should find it does the trick.
<Button Width="intValue">
<StackPanel>
<Image Source="yourImage"
RenderOptions.BitmapScalingMode="Fant" />
<Label/>
</StackPanel>
</Button>
Related
I have a custom radio button based on togglebutton:
<Style TargetType="{x:Type local:ToolbarRadioButton}" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Width" Value="60"/>
<Setter Property="Height" Value="60"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Vertical">
<iconPacks:PackIconModern Kind="{Binding TbIcon, RelativeSource={RelativeSource AncestorType=RadioButton}}"
Height="30" Width="35" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding TbText, RelativeSource={RelativeSource AncestorType=RadioButton}}" FontSize="12"
HorizontalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I use this control to create four toggle/radio buttons. I've horizontal centered the items in datatemplate, but I end up with this:
Forecast and its icon seem to be centered, but the others are partially left-aligned. They all use the same control so shouldn't they all be centered?
EDITS FOR CLARITY:
It doesn't matter which order I put them in, Forecast is always the one that's aligned correctly.
There is no whitespace in the text nor is there whitespace in the images and all images are sized according to the control defined above. Here's the implementation portion in case it's useful, though they're all the exact same:
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="0">
<customs:ToolbarRadioButton TbText="Day" TbIcon="CalendarDay" GroupName="calViewType" x:Name="dayOnOff"/>
<customs:ToolbarRadioButton TbText="Week" TbIcon="CalendarWeek" GroupName="calViewType" x:Name="weekOnOff"/>
<customs:ToolbarRadioButton TbText="Month" TbIcon="CalendarMonth" GroupName="calViewType" x:Name="monthOnOff" IsChecked="True"/>
<customs:ToolbarRadioButton TbText="Forecast" TbIcon="PeopleMultiple" GroupName="calViewType" x:Name="forecastOnOff"/>
</StackPanel>
For future readers: I figured out the answer by digging into the documentation on Button. There is a property on buttons called HorizontalContentAlignment (and vertical, of course) that apparently needs to be set to align the visual content. You can't set the HorizontalAlignment property of the item that is the content explicitly; apparently, the button wants to do that for you.
I want the Buttons in my WPF ToolBar to look like standard Buttons. That is, I want them to use the default Button style, but the ToolBar applies its own "ToolBar.ButtonStyleKey" style to the Buttons. I have tried this...
<ToolBar>
<Button Content="A Button" Style="{StaticResource {x:Type Button}}" />
</ToolBar>
... but the Button in the ToolBar still looks just like a TextBlock (no border, background, etc.).
Your example works fine for me on Windows 10.
You could also try this:
<ToolBar>
<ToolBar.Resources>
<Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}" />
</ToolBar.Resources>
<Button Content="A Button" />
</ToolBar>
Just use without any style,
<ToolBar>
<Button Content="A Button" />
</ToolBar>
EDIT
Misread the question, this should work fine without any issue
<ToolBar>
<Button Content="A Button" Style="{StaticResource {x:Type Button}}" />
</ToolBar>
Is it possible to create a style for ToolTip that would place an image next to the Item on which the tool tip resides and then show the tool tip text when the user hovers over the image? Something like this:
Currently I am doing a StackPanel to add the image with the tool tip like so:
<StackPanel Orientation="Horizontal">
<CheckBox Content="Reload Employee Data"
IsChecked="{Binding AdjustmentSettings.ReloadEmployeeData}"
Grid.Row="0"
Grid.Column="0">
</CheckBox>
<Image Source="/DelphiaLibrary;Component/Resources/info.ico"
ToolTip="Check if you want to re-upload ...."/>
</StackPanel>
EDIT
Just to clarify, I am looking for a way to style ToolTip such that if I define ToolTip on any object (i.e., Button, CheckBox, etc.) the info image is shown and the tool tip text is placed on this info image.
I would like to be able to do something like this and still get the same as the stack panel above:
<CheckBox Content="Reload Employee Data"
IsChecked="{Binding AdjustmentSettings.ReloadEmployeeData}"
Grid.Row="0"
Grid.Column="0"
ToolTip="Blah blah blah..."
Style="{StaticResource ToolTipImageStyle}">
</CheckBox>
And be able to apply this ToolTipImageStyle to any control (i.e., Button, CheckBox, TextBox, etc.). If that isn't possible can I style an individual control and just create different styles for different controls (one for buttons, another for TextBlock, etc.)?
This should do it. I couldn't figure out the color so just change that.
Source 1
Source 2
<Image Source="/DelphiaLibrary;Component/Resources/info.ico" Width="25" Height="25">
<Image.ToolTip>
<ToolTip Background="LightBlue">
<TextBlock Width="200" TextWrapping="WrapWithOverflow">
Check if you want to re-upload table foxpro.hrpersnl from the source. <LineBreak />
Leave unchecked to use existing data that has been previously uplaoded.
</TextBlock>
</ToolTip>
</Image.ToolTip>
</Image>
Update 1:
Source 1
In the App.xaml add this:
<Application.Resources>
<Style TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}" >
<TextBox Background="LightBlue" Width="200" TextWrapping="WrapWithOverflow" Text="{TemplateBinding ToolTip.Content}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Then in your XAML file change to:
Note: This will work with all object's tool tips.
<Image Source="Images/MenuImageZoomOut.png" Width="25" Height="25"
ToolTip="Check if you want to re-upload table foxpro.hrpersnl from the source. Leave unchecked to use existing data that has been previously uplaoded." />
The image:
If this doesn't work, try this: Source
I have a question about dat wpf buttons.
In my app I have fore example some code
<Button x:Name="SukaKnopka" VerticalAlignment="Top" HorizontalAlignment="Right" Background="Black" MaxHeight="20" MaxWidth="20" BorderBrush="Black">
<Image Source="ButtonsImages/close_btn.png" Stretch="Fill"/>
</Button>
All is fine but there is some little border around this button =( I have tryed BorderBrush="{x:Null}"
but the border again present. (This border highlights if MouseOver)
As far as I understand it, a lot of WPF controls are fully defined in their styles. So even if you specify a different border on a Button, for example; the Button's existing styles will override whatever you have specified. To overcome this, you must create a ControlTemplate.
<Button>
<Button.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
</Style>
</Button.Resources>
</Button>
This should do the trick. It will set every BorderThickness or every Border inside the button to 0.
slade is right, try modifying what you have to look more like the following and it should give you what you want.
<Button x:Name="SukaKnopka" VerticalAlignment="Top" HorizontalAlignment="Right" Background="Black" MaxHeight="20" MaxWidth="20" BorderBrush="Black">
<Button.Template>
<ControlTemplate>
<Image Source="ButtonsImages/close_btn.png" Stretch="Fill"/>
</ControlTemplate>
</Button.Template>
</Button>
Been a while since I did any "real" WPF, but does
BorderThickness="0,0,0,0"
work?
I have some DevExpress BarButtonItem layered on top of one another. So I need to ensure they are of the same width (e.g. if the content is longer or shorter, the buttons would "shift" around in between true and false visibility).
But I could not figure out how to add the width property to BarButtonItem. I tried the following but it doesn't work, and there is no Width property for BarButtonItem.
<dxb:BarButtonItem x:Name="btn1" Content="Foo">
<dxb:BarButtonItem.Style>
<Setter Property="Width" Value="100" />
</dxb:BarButtonItem.Style>
<dxb:BarButtonItem>
There is no direct way to specify BarButtonItem width or height, but you can specify the width or height of BarButtonItem.Content via the BarButtonItem.ContentTemplate property:
<dxb:BarManager Name="barManager" CreateStandardLayout="True">
<dxb:BarManager.Resources>
<DataTemplate x:Key="RedBarButtonItemContentWithFixedWidth">
<Border Background="Red" Width="100">
<ContentPresenter Content="{Binding}"/>
</Border>
</DataTemplate>
</dxb:BarManager.Resources>
<dxb:BarManager.Items>
<dxb:BarButtonItem x:Name="btn1" Content="Foo"
ContentTemplate="{StaticResource RedBarButtonItemContentWithFixedWidth}"/>
...