WPF RichTextBox shows text in FlowDocument only 1 character per line - wpf

I copied the code example from the RichTextBox help into an empty WPF window like this:
<Window x:Class="RichTextBoxWidthProblem.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<Grid>
<RichTextBox>
<FlowDocument>
<Paragraph>
This is flow content and you can
<Bold>edit me!</Bold>
</Paragraph>
</FlowDocument>
</RichTextBox>
</Grid>
</Window>
The result looks rather strange:
Why is there only 1 character written per line and how can I fix this ?

After spending a day trying to find the reason for this problem, I just run the application and the result looks like this:
The text uses all available space and gets reformatted if the Window size changes. This basically means there is no real problem with my code, but with the WPF designer in Visual Studio. After some further investigation I found out that in the designer, the Paragraph is only zero pixel wide.
If you want to see also in the designer a reasonable display, give a Width to Window, Grid or RichTextBox. But, of course, the text will then no longer use all the available space, but only the width you defined, which might not be what you want. If you want the width only to be used by the designer, but not during runtime, add the 'd:' before Width:
<Window x:Class="RichTextBoxWidthProblem.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" d:Width="333">
Please read this first before marking this as duplicate
I made the unfortunate experience that often a question gets marked a duplicate, when it is actually not. I am aware that there are several questions regarding FlowDocument not using the available width, but please note that most recommend to set ColumnWidth or some other width, which would actually then be correctly displayed in the Designer, but the running application would be limited to that width, which can be rather annoying (no resizing of the FlowDocument when the Window is made bigger).
Therefore it is important that an answer is on Stackoverflow explaining that it is in this case just a designer problem and not really a width problem.

Related

WPF: MediaElement doesn't display at runtime

This concerns WPF. The problem is that my MediaElement (actually a GIF) doesn't show up at runtime (so I only get an empty screen), even though it shows perfectly in the design mode. Before citing the code I note the following:
The GIF-file in question has been added to the solution.
Its BuildAction property is set to Resource (I've checked).
When I replace the MediaElement by an Image element (and either use the same GIF-file or replace that source-file by a .png file), the image/GIF does display at runtime. Just not when it's used as a MediaElement.
Closing and re-starting Visual Studio doesn't help.
As I said (and just to emphasize, if I may), the GIF image does display in the design mode part of the screen - just not at runtime.
And here's the code:
<Window x:Class="Testing.TestWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Testing"
mc:Ignorable="d"
Title="TestWindow" WindowState="Maximized">
<StackPanel>
<MediaElement Source="pack://application:,,,/Images/untitled.gif" Stretch="Fill" Visibility="Visible" />
</StackPanel>
</Window>
Thanks.

Strange strip at the top of Windows 10 (wpf)

I have this xaml on a project that uses Caliburn micro :
<Window x:Class="Myproject.MainWindowView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:cal="http://www.caliburnproject.org"
mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="1024" WindowStyle="None" Background="Black" >
</Window>
but when I run the application, I have a white line at the top of window :
How can I remove the line at the top?
I need a window that has no title bar, but should be resizable.
Well for the sake of easy points I suppose, the window chrome is built into the style templates and still inherited when you define WindowStyle="None" but still allow re-sizing to allow a hit spot for the manipulation event to occur. So like described in another answer you can take control of the base template and edit it to your requirements while still retaining the ability for the user to have point to invoke the re-sizing ability but with the frame thickness set to 0.
Hope this helps, cheers!

Extended WPF Toolkit - Resizing a childwindow

I´m using the librariay Extended WPF Toolkit
https://wpftoolkit.codeplex.com/
Is it possible to resize a ChildWindow like a ordinary Window?
The documentation shows some properties that seem to be related, but they are not accessible via xaml. https://wpftoolkit.codeplex.com/wikipage?title=ChildWindow
This is the example that I´m trying:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
xmlns:s="clr-namespace:System;assembly=mscorlib">
<xctk:WindowContainer>
<xctk:ChildWindow WindowBackground="Blue"
Left="75"
Top="50"
Width="275"
Height="125"
WindowState="Open" Canvas.Top="52">
<TextBlock Text="This is a Child Window" Padding="10"/>
</xctk:ChildWindow>
</xctk:WindowContainer>
</Window>
It appears as though the Resize functionality is only available in the Plus Edition of the software, the documentation can be found at the link below.
Based on the link you provided, it looks like you are using the same version as I am, which is the free one.
https://wpftoolkit.codeplex.com/wikipage?title=ChildWindow%20Plus
Kind of disappointing, we don't utilize the toolkit enough to warrant the cost.

Setting design time DataContext on a Window is giving a compiler error?

I have the following XAML below for the main window in my WPF application, I am trying to set the design time d:DataContext below, which I can successfully do for all my various UserControls, but it gives me this error when I try to do it on the window...
Error 1 The property 'DataContext' must be in the default namespace or in the element namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presentation'. Line 8 Position 9. C:\dev\bplus\PMT\src\UI\MainWindow.xaml 8 9 UI
<Window x:Class="BenchmarkPlus.PMT.UI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:UI="clr-namespace:BenchmarkPlus.PMT.UI"
xmlns:Controls="clr-namespace:BenchmarkPlus.PMT.UI.Controls"
d:DataContext="{d:DesignInstance Type=UI:MainViewModel, IsDesignTimeCreatable=True}"
Title="MainWindow" Height="1000" Width="1600" Background="#FF7A7C82">
<Grid>
<!-- Content Here -->
</grid>
</Window>
I needed to add the mc:Ignorable="d" attribute to the Window tag. Essentially I learned something new. The d: namespace prefix that Expression Blend/Visual Studio designer acknowledges is actually ignored/"commented out" by the real compiler/xaml parser!
<Window
...
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
...
/>
The following was taken from
Nathan, Adam (2010-06-04). WPF 4 Unleashed (Kindle Locations 1799-1811). Sams. Kindle Edition.
Markup Compatibility
The markup compatibility XML namespace (http://schemas.openxmlformats.org/markup-compatibility/2006, typically used with an mc prefix) contains an Ignorable attribute that instructs XAML processors to ignore all elements/attributes in specified namespaces if they can’t be resolved to their .NET types/members. (The namespace also has a ProcessContent attribute that overrides Ignorable for specific types inside the ignored namespaces.)
Expression Blend takes advantage of this feature to do things like add design-time properties to XAML content that can be ignored at runtime.
mc:Ignorable can be given a space-delimited list of namespaces, and mc:ProcessContent can be given a space-delimited list of elements. When XamlXmlReader encounters ignorable content that can’t be resolved, it doesn’t report any nodes for it. If the ignorable content can be resolved, it will be reported normally. So consumers don’t need to do anything special to handle markup compatibility correctly.
Wow, what a pain! Let's hope MS puts in some VS design-time support for x:Bind.
We to be able to use the VS designer but also be able to switch easily to x:Bind instead of Binding. Here's what I did:
In my View, I added a property to get my ViewModel. This makes sense because x:Bind paths are relative to the Page (i.e. the View object).
In my Page XAML, I added the following to the <Page ... > at the top of the XAML:
mc:Ignorable="d"
d:DataContext="{d:DesignInstance Type=local:MyView, IsDesignTimeCreatable=False}"
DataContext="{x:Bind}"
This way, the Page's actual data context is set to the Page itself due to the {x:Bind}. That's because x:Bind is relative to the Page and there is no path given.
At the same time, due to the d:DataContext line, the VS designer reflects on the MyView class (without creating an instance) for the purpose of the VS designer interaction. This lets VS design from MyView, where you can then scroll down to the ViewModel property, expand it and select the item that you want to bind to.
When you do all that, the VS designer will create a Binding statement whose path is relative to the View, i.e. it happens to be exactly the same as the path that x:Bind expects. So, if you want to switch to x:Bind later on, you can just search and replace all "{Binding" with "{x:Bind".
Why do we even need the d:DataContext line to tell VS what class to look at? Good question, since you would think that VS could figure out the very next line sets the DataContext to the Page, using DataContext={x:Bind}. Go ahead and try it, it does not work and neither does it work if you change x:Bind to Binding relative to self.
Hopefully this situation will get cleaned up by MS !!
If you are not tooo fussy on the data have a look at the sample data found in xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
You use it like this...
<ItemsControl ItemsSource="{Binding Path=Report.Audit.Data}" d:ItemsSource="{d:SampleData}" Grid.Row="1">
<ItemsControl.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
it then renders the items control with a few rows of data
I've solved the problem adding d:DataContext="{d:SampleData}" in the component definition (UserControl or Window).
<UserControl x:Class="TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestApp.Views"
DataContext="{Binding TestViewModel}"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
d:DataContext="{d:SampleData}"
>

How to relative scale size of User Control?

How to relative scale size of User Control like image (in image editor).
Example (100%):
(source: stegnar.com)
Scaled down UC (70%):
(source: stegnar.com)
Well I achieve this in picture editor, but I would like in WPF. :) I need this to adjust my application to different screen resolution, while nothing hiding (no scrollbars).
You could try the ViewBox control that scales up/down its content so that it fills the available space.
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1">
<Grid>
<Viewbox StretchDirection="Both" Stretch="Uniform">
<local:UserControl1 Height="600" Width="600"/>
</Viewbox>
</Grid>
you can place the whole container into a ViewBox
<Viewbox StretchDirection="Both" Stretch="Uniform">
<Grid>...</Grid>
</Viewbox>
you don't have to place each single textblock in it!
Use of Viewbox (as said by Milan Nankov) is a great idea. One thing that I must warn you is that it also zooms in or out other visual aspects as well.
For example, a Textbox with dimension 200 X 1000 is very different from a Textbox with dimension 20 X 100 zoomed in 10x.
WPF provides many layouting options which can change dimension of the controls according to the size of the container. But it doesn't change the size of the text. Viewbox overcomes this issue, but it introduces another issue. Check the image below which shows the same textbox in a viewbox before and after zooming.
One trick which could be used is to place every textblock in a viewbox. But I guess that would be an overkill, and I seriously don't having any backing for this trick. Please do check for yourself and reply whether it's practical or not.
Another trick could be to bind the control's height to the font size. We would be needing a converter in that case. Please refer to this reply.. Resize font in TextBox in Grid

Resources