In this particular case, images are bound to Buttons and ToggleButtons, which are inside of ToolBars, and ToolBars are underneath a ToolBarTray.
For some reason, any image or button that is put anywhere on the MainWindow doesn't appear when running the app on a laptop.
I tried adding an image outside the ToolBars and the ToolBarTray, so I know if the problem is somehow connected with these two controls, but it's probably not. The image wouldn't show up anyway.
When I try to debug the app on my computer or another computer, everything works just fine.
When I run the app on a computer
When I run the app on a laptop
XAML:
<ToolBarTray x:Name="homeTray" Margin="0,28,0,863" Background="#FFEEF5FD" ToolBarTray.IsLocked="True">
<ToolBar Band="0" BandIndex="0">
<Button x:Name="cut" ToolTip="Cut (CTRL + X)" Click="Cut">
<Image Source="./Resources/Text-Formatting/cut.png" Height="25" Width="25"/>
</Button>
</ToolBar>
<ToolBar Band="2" BandIndex="0">
<Button x:Name="copy" ToolTip="Copy (CTRL + C)" Click="Copy">
<Image Source="./Resources/Text-Formatting/copy.png" Height="25" Width="25"></Image>
</Button>
</ToolBar>
<ToolBar Band="0" Margin="63,10,-63,-10">
<ComboBox x:Name="cmbFonts" HorizontalAlignment="Left" IsEditable="True" VerticalAlignment="Top" Width="135" Background="#FFFBFBFB" BorderBrush="#FFB4B1B1" SelectionChanged="TxtFont" TextInput="ChangeFontByIntellisense"/>
<ComboBox x:Name="cmbFontSize" HorizontalAlignment="Left" IsEditable="True" VerticalAlignment="Top" Width="43" BorderBrush="#FFB4B1B1" Margin="15, 0, 0, 1" Background="White" SelectionChanged="TxtFontSize"/>
</ToolBar>
<ToolBar Band="0" Margin="85,47,-223,-55">
<Button>
<Image x:Name="alignmentLeft" ToolTip="Align left (CTRL + L)" Source="./Resources/Alignment/align-left.png" MouseDown="Alignment"></Image>
</Button>
<Button>
<Image x:Name="alignmentCenter" ToolTip="Align center (CTRL + E)" Source="./Resources/Alignment/align-center.png" MouseDown="Alignment"></Image>
</Button>
<Button>
<Image x:Name="alignmentRight" ToolTip="Align right (CTRL + R)" Source="./Resources/Alignment/align-right.png" MouseDown="Alignment"></Image>
</Button>
<Button>
<Image x:Name="alignmentJustify" ToolTip="Justify (CTRL + J)" Source="./Resources/Alignment/align-justify.png" MouseDown="Alignment"></Image>
</Button>
</ToolBar>
<ToolBar Margin="-172,77,149,-66" ToolTip="Letters height">
<Button Margin="0,2,0,1">
<Image Height="24" Width="24" x:Name="txtHeight" Source="./Resources/Text-Formatting/Aa.png" MouseLeftButtonDown="AaMenuOpen">
<Image.ContextMenu>
<ContextMenu>
<MenuItem Header="ALL CAPITAL" FontSize="17" FontFamily="Segoe UI Light" Click="AaOptions"></MenuItem>
<MenuItem Header="all small" FontSize="17" FontFamily="Segoe UI Light" Click="AaOptions"></MenuItem>
<MenuItem Header="First letter capital" FontSize="17" FontFamily="Segoe UI Light" Click="AaOptions"></MenuItem>
</ContextMenu>
</Image.ContextMenu>
</Image>
</Button>
</ToolBar>
<ToolBar Band="2" Margin="60,-8,28,8">
<ToggleButton Command="EditingCommands.ToggleBold" x:Name="bold" ToolTip="Bold (CTRL + B)">
<Image Source="./Resources/Text-Formatting/bold.png" Height="12.5" Width="12.5"/>
</ToggleButton>
</ToolBar>
<ToolBar Band="2" Margin="-28,-8,34,8">
<ToggleButton Command="EditingCommands.ToggleItalic" x:Name="italic" ToolTip="Italic (CTRL + I)">
<Image Source="./Resources/Text-Formatting/italic.png" Height="15" Width="15"></Image>
</ToggleButton>
</ToolBar>
<ToolBar Band="2" Margin="-36,-8,42,8">
<ToggleButton Command="EditingCommands.ToggleUnderline" x:Name="underline" ToolTip="Underlined (CTRL + U)">
<Image Source="./Resources/Text-Formatting/underline.png" Height="18" Width="18"></Image>
</ToggleButton>
</ToolBar>
<ToolBar Band="2" Margin="-99,33,177,-27">
<ToggleButton x:Name="btnReadOnly" ToolTip="Read-only" Click="TxtReadOnly">
<Image x:Name="readOnly" Source="Resources/Text-Formatting/readonly.png" Height="21" Width="21"/>
</ToggleButton>
</ToolBar>
<ToolBar Margin="-47,44,-26,-42" RenderTransformOrigin="3.719,0.568" ToolTip="Foreground color">
<toolkit:ColorPicker x:Name="foregroundColor" Width="40" Margin="10" SelectedColorChanged="ForegroundColor"/>
</ToolBar>
<ToolBar Margin="-51,76,-22,-74" RenderTransformOrigin="3.719,0.568" ToolTip="Background color">
<toolkit:ColorPicker x:Name="backgroundColor" Width="40" Margin="10" SelectedColorChanged="BackgroundColor"/>
</ToolBar>
<ToolBar Band="2" Margin="-166,-5,240,11">
<ToggleButton x:Name="superscript" ToolTip="Superscript" Click="Superscript">
<Image Source="Resources/Text-Formatting/superscript.png" Height="21" Width="21"/>
</ToggleButton>
</ToolBar>
<ToolBar Band="2" Margin="-284,33,365,-27">
<ToggleButton x:Name="subscript" ToolTip="Subscript" Click="Subscript">
<Image Source="Resources/Text-Formatting/subscript.png" Height="21" Width="21"/>
</ToggleButton>
</ToolBar>
</ToolBarTray>
Labels shown in the pictures above:
<Label x:Name="lbCut" Content="Cut" HorizontalAlignment="Left" Margin="56,40,0,0" VerticalAlignment="Top" IsEnabled="False"/>
<Label x:Name="lbCopy" Content="Copy" HorizontalAlignment="Left" Margin="56,74,0,0" VerticalAlignment="Top" IsEnabled="False"/>
<Rectangle x:Name="rectSeparator" Fill="#FFC1C1F9" HorizontalAlignment="Left" Height="110" Margin="99,33,0,0" Stroke="#FFC1C1F9" VerticalAlignment="Top" Width="1"/>
<Label Content="Alignment" HorizontalAlignment="Left" Margin="388,40,0,0" VerticalAlignment="Top" IsEnabled="False"/>
I put everything in one ToolBarTray and it solved the problem.
Thank you, Andy, for giving me the advice.
Related
I have a toolbar in my WPF window as shown in bellow, please help me change labels foreground color dynamically in code behind.
Thanks...
<DockPanel Height="60" VerticalAlignment="Top">
<ToolBar Name="MyToolBar" DockPanel.Dock="Top" Height="60" VerticalAlignment="Top" FlowDirection="RightToLeft"
FontFamily="Calibri" FontSize="16" FontWeight="Bold" Background="#FFEEF5FD" Foreground="Black" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<Button Name="BtnSubmit" Style="{DynamicResource TStyle}" Click="BtnSubmit_Click" Tag="New" Height="52" Width="60"
IsDefault="True" Margin="0,0,0,1">
<StackPanel Margin="0" Height="54"
<Image Source="/Img/Save 04.png" Height="25" Margin="16,0"/>
<Label Content="Save" Margin="0,0,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<Button Name="BtnApply" Style="{DynamicResource TStyle}" Click="BtnApply_Click" Tag="New" Height="52"
IsDefault="True" Margin="0,1,0,2" Width="85">
<StackPanel Margin="0" Height="52" Width="82">
<Image Source="/Img/ApplyIcon.png" Height="25" Margin="29,0,26,0"/>
<Label Content="Edit" Margin="-15,0,-23,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
</ToolBar>
</DockPanel>
To change the Foreground of all TextBlock elements you must define a Brush resource and assign it to all relevant TextBlock elements using {DynamicResource}:
MainWindow.xaml
<Window>
<Window.Resources>
<SolidColorBrush x:Key="ButtonLabelForegroundBrush" Color="Black" />
</Window.Resources>
<DockPanel>
<ToolBar>
<Button>
<TextBlock Foreground="{DynamicResource ButtonLabelForegroundBrush}" />
</Button>
</ToolBar>
</DockPanel>
</Window>
MainWindow.xaml.cs
private void ChangeTextBlockForeground()
{
var brush = FindResource("ButtonLabelForegroundBrush") as SolidColorBrush;
brush.Color = Colors.Red;
}
This is my custom title bar:
That three dot button is a button control. I want to create a menu like this (drew by paint!):
But I don't have any idea. I know there is a "Menu" control but I couldn't use it as I wanted.
"More" button code:
<Button x:Name="More" Grid.Column="1" Style="{DynamicResource TitleBarButton}" IsTabStop="False" Focusable="False">
<Button.Background>
<ImageBrush ImageSource="icons/More.png"/>
</Button.Background>
</Button>
You may replace the Button with a ToggleButton and use a Popup that you bind to the ToggleButton's IsChecked property:
<ToggleButton x:Name="More" Grid.Column="1" Style="{DynamicResource TitleBarButton}" IsTabStop="False" Focusable="False">
<ToggleButton.Background>
<ImageBrush ImageSource="icons/More.png"/>
</ToggleButton.Background>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=More}"
PlacementTarget="{Binding ElementName=More}"
Placement="Bottom">
<StackPanel Width="100" Background="Yellow">
<TextBlock Text="Check For Updates" />
<Grid Background="DarkGray" Height="3" />
<TextBlock Text="Do something else" />
</StackPanel>
</Popup>
You may of course replace the contents of the Popup with whatever you want.
enter image description here
You may need setup menu items to act as buttons
(more WPF button feature int this book)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.0*" />
<ColumnDefinition Width="40" />
<ColumnDefinition Width="40" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" >
<Menu Height="40" Width="40" Background="Green" >
<MenuItem >
<!-- MENU HEADER -->
<MenuItem.Header>
<Border>
<Image Source="/WpfMenuButton;component/Images/DotsImg.PNG" />
</Border>
</MenuItem.Header>
<!-- MENU ITEM UPDATE -->
<MenuItem Click="CheckUpdate_Click" Background="Chocolate">
<MenuItem.Header>
<TextBlock Text="Check for update" VerticalAlignment="Center" HorizontalAlignment="Center"
Height="30" Width="100" />
</MenuItem.Header>
</MenuItem>
<!-- MENU ITEM WIFI -->
<MenuItem Click="DoSomethingElse_Click" Background="LightGreen">
<MenuItem.Header>
<TextBlock Text="Do something else" VerticalAlignment="Center"
HorizontalAlignment="Center" Height="30" Width="140" />
</MenuItem.Header>
</MenuItem>
<!-- MENU ITEM ABOUT -->
<MenuItem Click="MenuAbout_Click" Background= "LightBlue">
<MenuItem.Header>
<TextBlock Text="About" VerticalAlignment="Center" HorizontalAlignment="Center"
Height="30" Width="140" />
</MenuItem.Header>
</MenuItem>
</MenuItem>
</Menu>
</Grid>
<Grid Grid.Column="2" >
<Button Content="-" Foreground="White" FontSize="28" Background="Green"/>
</Grid>
<Grid Grid.Column="3" >
<Button Content="X" Foreground="White" FontSize="28" Background="Green"/>
</Grid>
</Grid>
</Grid>
In this code I added an image before the button text I'd like to have a space between the image and text but the code I have isn't working.
<Button Height="25"
Width="80"
Margin="5,10,5,10"
Command="{Binding PreviewTemplateCommand}">
<StackPanel Orientation="Horizontal" Height="15" Width="63">
<Image Source="/UILibrary;component/Themes/Default/Images/preview.PNG"
Height="15" Width="15" Margin="0,0,0,0" />
<TextBlock >Preview</TextBlock>
</StackPanel>
</Button>
Hi you have to set the left margin of the textblock. Try this:
<StackPanel Orientation="Horizontal" Height="15" Width="63">
<Image Source="..." Height="15" Width="15" Margin="0,0,0,0" />
<TextBlock Margin="25,0,0,0">Preview</TextBlock>
</StackPanel>
I need to have an image instead of text in my menu header. I have written a code but its not showing up the image.
Following is my xaml part for it.
<Menu Height="50" Width="50" VerticalAlignment="Top" IsMainMenu="True">
<MenuItem Height="50" Width="50">
<MenuItem.Header>
<Image HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="50" Source="Images/pulsesi_icon_black.PNG"/>
</MenuItem.Header>
</MenuItem>
</Menu>
Help me out of it, I don't need an Icon.
you can use Menuitem.Icon for image in header.
<MenuItem >
<MenuItem.Icon>
<Image Width="20" Height="20" Source="/Resources/Images/Key.jpg" />
</MenuItem.Icon>
</MenuItem>
I'm trying to put WPF user control on the WinForm using ElementHost but as a result of my icons are not displayed on the button.
http://gyazo.com/7dc201e30246b2b2676060de0ebf35a9
http://gyazo.com/67f039ce310d17a2d270c816ebc5fb3b
<ToolBar>
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="pack://siteoforigin:,,,/Resources/document-add2.png" Stretch="None" Margin="0,0,3,0" />
<TextBlock>Добавить стратегию</TextBlock>
</StackPanel>
</Button>
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="pack://siteoforigin:,,,/Resources/document-delete2.png" Stretch="None" Margin="0,0,3,0" />
<TextBlock>Удалить стратегию</TextBlock>
</StackPanel>
</Button>
<Separator></Separator>
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="pack://siteoforigin:,,,/Resources/document-control_play.png" Stretch="None" Margin="0,0,3,0" />
<TextBlock>Запустить стратегию</TextBlock>
</StackPanel>
</Button>
<Separator></Separator>
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="pack://siteoforigin:,,,/Resources/document-gear.png" Stretch="None" Margin="0,0,3,0" />
<TextBlock>Изменить настройки</TextBlock>
</StackPanel>
</Button>
</ToolBar>
Did you specify your siteoforigin?
If the images can be found in the same project, try:
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="pack://application:,,,/Resources/document-gear.png" Stretch="None" Margin="0,0,3,0" />
<TextBlock>Изменить настройки</TextBlock>
</StackPanel>
</Button>
So: pack://application:,,,/[path from root of project]