Fix: Word print view showing no margins and pages appear collated

I’m often asked by friends and family to assist them on frustrating technical issues they can’t resolve by themselves. Thanks to remote access / support software like TeamViewer, this is a piece of cake nowadays.

The solution to such problems isn’t always straightforward though. Just came across a Microsoft Word installation where suddenly the Print view had started using a strange layout with grid lines in the background, no margins and with the consecutive pages showing collated as you scrolled in the document. This defeats the whole WYSIWYG (What-You-See-Is-What-You-Get) concept that most people like about modern word processors.

Removing the grid lines is straightforward from the View menu (Appearance section), but to fix the other issues, the only way I found was, at the Zoom section of the View menu, to change to Multiple Pages, then change to Single Page, then Set Zoom to 100% and finally Set zoom to Page Width. After all is fixed you can then switch those settings to how you prefer them (say zoom 100% instead of page width).

If that doesn’t work, you could try resetting Microsoft Word user settings to their defaults, both an automated and a manual way is offered at:

https://support.microsoft.com/en-us/help/822005/how-to-reset-user-options-and-registry-settings-in-word

Fix: jqGrid search operator menu items jumping around on hover

A colleague noticed earlier on today, that on the Chrome browser they were using, the search operator menu items of a jqGrid on a web app’s UI were jumping around on hover, making it practically impossible to select one.

  

Seems this had started occurring on that ASP.net MVC web application, after a recent update to the latest jQuery-UI NuGet package.

Probably the issue wouldn’t occur if it wasn’t using the older free version of jqGrid. Will probably transition it eventually to free-jqGrid, the free fork (and quite evolved since forked) of the older free version of jqGrid, since jqGrid’s newer version is now commercial.

For the time being, I ended up adding this fix to Content/Site.css of the ASP.net MVC webapp:

/* jqGrid search operator menu item hover (uses jQuey-UI) */

a.ui-corner-all.g-menu-item.ui-state-hover {
    border: 1px #cccccc !important; /* fix for Chrome: removed "solid" (was causing hovered items to resize and menu to relayout, making it too hard to select them */
    /*border: 1px solid #cccccc;*/ /* this is used by jQuery-UI for .ui-state-hover */

    color: blue; /* showing blue color for hovered over menu text, should show better than a hover border since selected item already has a border itself */
}

This also has the added extra that on hover it shows the hovered item’s text in blue:

HowTo: Insert new line and spacing at content of WPF TextBlock control

While adding more voice commands at SpeechTurtle, I had to update the active legend where the available commands are displayed and their text is highlighted as the respective commands are recognized by the speech recognition engine (using .NET’s managed Speech API).

A problem I faced was how to add a newline and prefixing the 2nd line with some spaces to align with the first command at the 1st line…

First of all, adding a new line was easy, inserted a <LineBreak /> tag in the XAML inside the TextBlock tag’s content, as shown in the screenshot below:

Then I had the issue that I needed to add some spacing so that “Pen up” at the 2nd line starts exactly under the start of “Forward” at the 1st line (see screenshot above)…

Tried to add a Run tag, with its Text set to some spaces, but couldn’t get an exact positioning:

So I tried using a Separator instead, since I could define a Width for it, however, it was drawing as a gray line:

So I either had to change its color to White or Transparent, or use a Null Foreground Brush on it (one difference of a Null brush from a Transparent one is that the element ignores Mouse events in that case from what I remember), or just set its Visibility mode to Hidden:

Do note that WPF has another visibility mode apart from Visible and Hidden, that is Collapsed, where the respective control disappears from the layout flow (that value is not supported in Silverlight from what I remember), which is not what we wanted in this case (Hidden was the correct option to choose):

Vertical Centering with CSS

According to http://www.w3.org/Style/Examples/007/center.en.html#vertical

CSS level 2 doesn’t have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

That page points to a horizontal and vertical centering example (which seems to be a common need): http://www.w3.org/Style/Examples/007/center-example

To cater for various (mainly older) web browsers and peculiarities in CSS implementations, many vertical centering techniques have been developed. Here are some related links:

• http://blog.themeforest.net/tutorials/vertical-centering-with-css 
  (test page: http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html)
• http://www.vanseodesign.com/css/vertical-centering/
• http://hicksdesign.co.uk/journal/how-to-vertical-centering-with-css
• http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

How to space StackPanel items in XAML (has no Padding property)

While adding some properties to the back panels of ClipFlair windows, I came upon the issue of how to space items in a StackPanel. A Padding property is missing from multiple item containers (only single content controls have such), but a nice solution is described at: http://stackoverflow.com/questions/932510/how-do-i-space-out-the-child-elements-of-a-stackpanel

Sergey Aldoukhov suggested there (WPF example):

Use Margin or Padding, applied to the scope within the container:

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Margin" Value="0,10,0,0"/>
        </Style>
    </StackPanel.Resources> 
    <TextBox Text="Apple"/>
    <TextBox Text="Banana"/>
    <TextBox Text="Cherry"/>
</StackPanel>

EDIT: In case you would want to re-use the margin between two containers, you can convert the margin value to a resource in an outer scope, f.e.

<Window.Resources>
    <Thickness x:Key="tbMargin">0,10,0,0</Thickness>
</Window.Resources>

and then refer to this value in the inner scope

<StackPanel.Resources>
    <Style TargetType="{x:Type TextBox}">
        <Setter Property="Margin" Value="{StaticResource tbMargin}"/>
    </Style>
</StackPanel.Resources>

 

Following up on Sergey’s suggestion there, you can define and reuse a whole Style (with various property setters, including Margin) instead of just a Thickness object:

<Style x:Key="MyStyle" TargetType="SomeItemType">
  <Setter Property="Margin" Value="0,5,0,5" />
  ...
</Style>

…

  <StackPanel>
    <StackPanel.Resources>
      <Style TargetType="SomeItemType" BasedOn="{StaticResource MyStyle}" />
    </StackPanel.Resources>
  ...
  </StackPanel>

Note that the trick here is the use of Style Inheritance for the implicit style, inheriting from the style in some outer (probably merged from external XAML file) resource dictionary.

Sidenote:

At first, I naively tried to use the implicit style to set the Style property of the control to that outer Style resource (say defined with the key "MyStyle"):

<StackPanel>
  <StackPanel.Resources>
    <Style TargetType="SomeItemType">
      <Setter Property="Style" Value={StaticResource MyStyle}" />
    </Style>
  </StackPanel.Resources>
</StackPanel>

which caused Visual Studio 2010 to shut down immediately with CATASTROPHIC FAILURE error (HRESULT: 0x8000FFFF (E_UNEXPECTED)), as described at https://connect.microsoft.com/VisualStudio/feedback/details/753211/xaml-editor-window-fails-with-catastrophic-failure-when-a-style-tries-to-set-style-property#

 

Note btw that there’s an even nicer solution that Elaz Katz mentioned at that StackOverflow discussion:

http://blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/what-is-the-easiest-way-to-set-spacing-between-items-in-stackpanel.aspx

It shows how to create an attached behavior, so that syntax like this would work:

<StackPanel local:MarginSetter.Margin="5">
   <TextBox Text="hello" />
   <Button Content="hello" />
   <Button Content="hello" />
</StackPanel>

 

Finally, another idea could be to use WPF’s UniformGrid, although that will try to space its children evenly in the available space:

http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.uniformgrid.aspx

http://www.longhorncorner.com/uploadfile/raj1979/uniformgrid-in-wpf/

Note that it has been ported to Silverlight too:

http://www.jeff.wilcox.name/2009/01/uniform-grid/