As a part of my application I have buttons with images. I use the WPF_CommonControls library. I have a folder called Images in my project where I store all the pictures. I set up the grid like this:
<Grid>
<ListView ItemContainerStyle="{StaticResource ListboxItemStyle}" IsTabStop="True" Margin="6,6,6,62" Name="lvJusticePersonnel" TabIndex="7" HorizontalContentAlignment="Stretch" SelectionMode="Single"/>
<CommonControls:ccBilingualButton Canvas.Left="12" Canvas.Top="0" Cursor="Hand" Height="50.043" HorizontalAlignment="Right" Margin="0,0,6,6" Name="btnEditJustPerson" TabIndex="9" VerticalAlignment="Bottom" Width="75" ImageSource="imgEdit.png" LabelEnglish="Edit" LabelFrench="Edit" FontWeight="Bold" ImageLocation="Top" Foreground="Black" HorizontalContentAlignment="Center" BorderBrush="DarkGreen" BorderThickness="1" />
<CommonControls:ccBilingualButton Canvas.Left="12" Canvas.Top="0" Cursor="Hand" Height="50" HorizontalAlignment="Right" Margin="0,0,86,6" Name="btnAddJustPerson" TabIndex="8" VerticalAlignment="Bottom" Width="75" LabelEnglish="Add" LabelFrench="Add" ImageSource="imgAdd.png" FontWeight="Bold" ImageLocation="Top" Foreground="Black" HorizontalContentAlignment="Center" BorderBrush="DarkBlue" BorderThickness="1" />
</Grid>
But when I try to use this the lines starting with CommonControls:ccBilingualButton get underlined in blue and I get the messages "cannot locate resource 'images/imgedit.png'." and "cannot locate resource 'images/imgadd.png'."
These images both are contained in the Images folder and can be opened. I've gone through the object browser and tried to open the ccBilingualButton class, but it does not open.
Also, I've tried searching around and there's practically nothing written about this class on the internet.
The problem lies in the component: ImageSource="imgEdit.png"
Any suggestions for fixing this error?
Update: The debugger runs fine and the images show up in the application when I'm running it. The problem is I can't publish it and install it on other computers while these errors exist.
Update 2: Looking at the project file, I see that all the images are included
<ItemGroup>
<Resource Include="Images\imgAdd.png" />
<Resource Include="Images\imgCancel.png" />
<Resource Include="Images\imgClock.png" />
<Resource Include="Images\imgClock_Small.png" />
<Resource Include="Images\imgConfirm.png" />
<Resource Include="Images\imgDelete.png" />
<Resource Include="Images\imgEdit.png" />
<Resource Include="Images\imgError.png" />
<Resource Include="Images\imgHelp.png" />
<Resource Include="Images\imgInfo.png" />
<Resource Include="Images\imgProject-Small.png" />
<Resource Include="Images\imgReports.png" />
<Resource Include="Images\imgSearch.png" />
<Resource Include="Images\imgUser.png" />
<Resource Include="Images\imgWarning.png" />
</ItemGroup>
But I've noticed that the slashes in the itemGroup are the opposite from the error message I'm getting. The error message is Cannot locate resource 'images/imgEdit.png' but the resource include uses \.
Now, if I try to change the resource include slash, it raises more errors since using /for a path isn't correct.
So, I need to change the path string that the xaml line is using, i.e. the 'Cannot locate resource' line, however I do not know where it is located.
If anyone else has had this issue, I'd love to hear some ideas.
Related
i'm trying to put a close button image on my newly created tabs for my app, but i just can't seem to get the right path. This is how i've tried inputting it (code is from MainWindow.xaml):
<TabControl Margin="10,26,10,10" ItemsSource="{Binding FileTabs}">
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FileTabName}" />
<Button Name="closeTabBtn">
<Image Width="20" Height="20" Source="/Images/button-close.jpg" />
</Button>
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
This is my project structure:
What is the correct path for the image source property since i'm kind of new at this ?
You should set the Build Action of the image file to Resource in Visual Studio and try with a pack URI if your relative path still doesn't work:
Source="pack://application:,,,/Images/button-close.png"
I have a ressource dictionary in a control library to state my bitmap image. key= Refresh -M
UriSource="/Resources/Icons/Basic/refresh-100.png"
You can see in the code below that its instanciated in a button viewbox.
Since my styles dictionary are appart form the main project i made "WPFStyle_Ascendecies.xaml" that include all of them so I only have to include this one in app.xaml
/------Images-----\
View Designer
App.exe
/------#See last button-----\
<!--Left Top to DownMenu -->
<StackPanel Background="DimGray" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="2">
<TextBlock Text="{Binding Title}" Padding="0,14,0,0" Height="56" Margin="0,0,0,0" FontSize="18" Background="Black" Foreground="White" TextAlignment="Center" />
<Button x:Name="Homepage" Content="Home Page" Height="30" Margin="0,0,0,1" Click="Homepage_Click" />
<Button x:Name="Clients" Content="Clients" Height="30" Margin="0,0,0,1" Click="Clients_Click" />
<Button Content="Hello" Height="30" Margin="0,0,0,1" />
<Button Height="30" Margin="0,0,0,1" >
<Viewbox>
<Image Source="{StaticResource Refresh -M}"/>
</Viewbox>
</Button>
</StackPanel>
<!--PagesPresenterFrame-->
<Frame x:Name="Main" Grid.Column="2" Margin="0,34,0,0" Grid.RowSpan="2"/>
</Grid>
</Border>
You use the relative uri to display the image. In the XAML file, the compiler found the image based on your relative uri and the root path where XAML is located, so the image can be displayed. When you run exe, the father uri is folder where the exe in , so exe cannot find the image in combination with the relative path you provided, the image will not be displayed. Solution: such as exe in Solution/bin/Debug, add Basic/refresh-100. PNG in the Debug folder,use UriSource= "/Basic/refresh-100. PNG” in xaml , run exe , the image will be shown
[Update]
You could set the Copy to the Output Directory as 'Copy if newer' or 'Copy always' in the properties of the picture. See the below picture:
When I'm creating WPF layouts in Visual Studio 2010 I just drag and drop controls from the Toolbox onto the default element, typically a Grid. When I do this the spacing shown in Visual studio does not match what's displayed at runtime. For example, here are the visual editor and runtime results, respectively, for two layouts . . .
. . . and . . .
... notice the spacing is altered.
Here's the XAML that was generated for the two examples . . .
<Button Content="ProjectPattern" Height="23" HorizontalAlignment="Left" Margin="12,296,0,0" Name="butProjPattern" VerticalAlignment="Top" Width="117" Click="butProjPattern_Click" />
<TextBlock Height="22" HorizontalAlignment="Left" Margin="135,0,0,141" Name="ResultProjPattern" Text="(result)" VerticalAlignment="Bottom" Width="41" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="175,295,0,0" Name="TextBlockPattern" Text=" (pattern file)" Padding="4" VerticalAlignment="Top" Width="135" Background="#FFF1F3FF" />
<Button Content="...browse" Height="23" HorizontalAlignment="Right" Margin="0,294,814,0" Name="buttonPatternBrowse" VerticalAlignment="Top" Width="54" Click="buttonPatternBrowse_Click" />
...and...
<Button Content="Display Cross" Height="24" HorizontalAlignment="Left" Margin="622,108,0,0" Name="buttonCross" VerticalAlignment="Top" Width="117" Click="buttonCross_Click" />
<TextBlock Height="24" HorizontalAlignment="Right" Margin="0,107,344,0" Name="ResultCross" Text="(result)" VerticalAlignment="Top" Width="100" />
<Button Content="Display Diamond" Height="23" HorizontalAlignment="Left" Margin="622,138,0,0" Name="butDiamond" VerticalAlignment="Top" Width="117" Click="butDiamond_Click" />
<TextBlock Height="23" HorizontalAlignment="Right" Margin="0,138,344,0" Name="ResultDiamond" Text="(result)" VerticalAlignment="Top" Width="100" />
<Button Content="DisplayFullField" Height="24" HorizontalAlignment="Left" Margin="622,165,0,0" Name="butFullField" VerticalAlignment="Top" Width="117" />
<TextBlock Height="24" HorizontalAlignment="Right" Margin="0,164,344,0" Name="ResultFullField" Text="(result)" VerticalAlignment="Top" Width="100" />
I added button handlers, text content, etc, but the layout is strictly what was generated by the Visual Studio layout editor. One thing I noticed is that even though it's drag-and-drop from the Toolbox onto the Grid, Visual Studio is inconsistent about whether it chooses "Left" or "Right" for its HorizontalAlignment for different elements.
The container element is just a default Grid in a default Window - it can minimize but not resize . . .
<Window x:Class="Caller1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="1200" ResizeMode="CanMinimize">
<Grid Height="460">
The result is that I have to waste lots of time going between the editor and running my app to "tweak" my layout. What prevents the "WYSIWYG" layout editor from matching the runtime layout and how can I get them to correspond?
Thanks in advance.
I can't see your images (dumb work firewall), but I can tell by your XAML that you are using the Grid wrong. I understand that this may be the fault of the editor, but seriously, you shouldn't be setting the Width and Height properties on all your elements.
If you want a fixed size for the Grid's children, set up some RowDefinitions and ColumnDefinitions and set those sizes. Your layout is much easier to work with (and will probably be more accurate in the designer) if you do this. So, your first Grid would look like this:
<Grid Margin="12,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="117" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="138" /> <!-- This is your desired width + horizontal margins -->
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button x:Name="butProjPattern"
Grid.Column="0"
Content="ProjectPattern"
VerticalAlignment="Center"
Click="butProjPattern_Click" />
<TextBlock x:Name="ResultProjPattern"
Grid.Column="1"
Margin="6,0,0,0"
Text="(result)"
VerticalAlignment="Center" />
<TextBlock x:Name="TextBlockPattern"
Grid.Column="2"
Margin="3,0,0,0"
Padding="4"
Text=" (pattern file)"
Background="#FFF1F3FF" />
<Button x:Name="buttonPatternBrowse"
Grid.Column="3"
Content="...browse"
Margin="22,0,0,0"
VerticalAlignment="Center"
Padding="2,1"
Click="buttonPatternBrowse_Click" />
</Grid>
The other thing I want to note is that after I put this in Kaxaml, which is great for rapid prototyping of your XAML layouts, I noticed that you should really just be using a StackPanel. The first grid could really be this much simpler implementation (you will have to set the Width on a couple of your items to match the layout):
<StackPanel Margin="12,0,0,0" Orientation="Horizontal">
<Button x:Name="butProjPattern"
Content="ProjectPattern"
Width="117"
Click="butProjPattern_Click" />
<TextBlock x:Name="ResultProjPattern"
Margin="6,0,0,0"
Text="(result)"
VerticalAlignment="Center" />
<TextBlock x:Name="TextBlockPattern"
Margin="3,0,0,0"
Padding="4"
Width="135"
Text=" (pattern file)"
Background="#FFF1F3FF" />
<Button x:Name="buttonPatternBrowse"
Content="...browse"
Margin="22,0,0,0"
VerticalAlignment="Center"
Padding="2,1"
Click="buttonPatternBrowse_Click" />
</StackPanel>
This answer is not directly an answer to your actual question, but instead a suggestion to avoid your problem.
You will often get UI control placement problems when you use exact control positioning with the Margin property. It is a good procedure (and in WPF especially) to allow controls to place and/or space themselves using the various Alignment options available. I have always managed to get the desired layout using this method.
For example, had you used a Grid or StackPanel to arrange your controls, you would not have come across this problem. Many WPF developers that I know don't even bother using the designer in Visual Studio because of the problems that you mentioned... after dragging and dropping a control and then going to the XAML to remove unwanted values, it often works out quicker to simply type the XAML myself.
If you really want to know why the Visual Studio designer... well, er... doesn't work properly, you may have more luck asking on the Microsoft Developer Forum, where you question might actually get seen by a Microsoft employee.
In Silverlight 4 application there are few images, both are displayed correctly in design mode, one is displayed correctly in run-time also:
<Image Height="180" Width="149" Source="../Picts/Field.png" />
Another one is not displayed in run-time:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5" Visibility="{Binding SquadSavedVisibility, Mode=OneWay}">
<Image Source="..\Picts\ok.png" Width="16" Height="16" />
<TextBlock Text=" It is saved" Foreground="Green"/>
</StackPanel>
Why? And how to get it displayed?
Any thoughts are welcome. Thanks.
It's all in your slashes, VS Design time doesn't mind you using "..\Picts\ok.png", but Silverlight runtime wants to see "../Picts/ok.png". In other words, your slashes matter.
I had a similar problem with images showing in design-time, but not at runtime. Mine was using a pack URI so I wanted to post that fix as well:
Does not work at runtime, does work at design-time:
<Image Source="mydllname;component/Images/logo.png" />
Works at both design and runtime:
<Image Source="/mydllName;component/Images/logo.png" />
Note the extra '/' before the Pack URI starts.
You can try to hook into the Image.ImageFailed Event. For examples and more explanation you look into this page:
http://msdn.microsoft.com/en-us/library/system.windows.controls.image.imagefailed%28v=VS.95%29.aspx
I'm trying to add a custom font as a resource in my application.
I have a "CustomFont" directory in the application and all the fonts inside of it are set to "Resource"
<Window.Resources>
<Style x:Key="Gotham-XLight">
<Setter Property="TextElement.FontFamily"
Value="/CustomFonts;Component/#Gotham-XLight" />
</Style>
</Window.Resources>
And then on my TextBlock I have this: (inside a grid)
<TextBlock x:Name="TimeTextBlock" Style="{DynamicResource Gotham-XLight}"
TextAlignment="Center" FontSize="25" FontWeight="Bold"
Foreground="White" Text="TextBlockTimer"
Margin="105,242.974,0,226.975" HorizontalAlignment="Left"
Width="221.919" />
But I'm not seeing my font as people say. Am I doing something wrong?
You may want to check the name of the font, you need to specify the name of the font not the name of the file.
Double click on the font file and it should show a "Font name:" that's what you want to make sure is specified in your style.
Try this
<Window.Resources>
<Style x:Key="Gotham-XLight">
<Setter Property="TextElement.FontFamily" Value="CustomFonts/#Gotham-XLight" />
</Style>
</Window.Resources>
Also, if you are not planning on changing the style at runtime {StaticResource Gotham-XLight} will be much more performant.
In xaml I did it like this:
<Button Grid.Column="1" Grid.RowSpan="2" Name="start" Margin="5" Click="start_Click">
<TextBlock Name="test" FontFamily="pack://application:,,,/Y_Yoga;Component/Resources/#FontAwesome"></TextBlock>
</Button>
However, I don't know if #FontAwesome is font's embedded name or is it the result that I renamed the .ttf file.
Hope to be helpful!
Late reply but worth mentioning. To add a custom font that will apply globally in your window you could add this in your csproj file to include the fonts from the Fonts folder of your project as resources.
<ItemGroup>
<Resource Include="Fonts\*.ttf" />
</ItemGroup>
Then in your window XAML you can specify the FontFamily in the Window part:
<Window x:Class="Namespace.MainWindow"
...
FontFamily="/Fonts/#[FONT NAME]"
Title="">
<Grid>
...
</Grid>
</Window>
I hope this could help somebody, as I spent some time to figure it out.