Imagebrush is stretching one instance of an image but not another - wpf

One of the stranger occurrences I've come across, I have a set of repeatbuttons that use a certain image as a background. Despite the buttons being identical, one is displayed differently. Fully reproducible sample below, along with a number of variations each with different results.
Link to icons:
https://github.com/driftyco/ionicons/blob/master/png/512/plus.png
https://github.com/driftyco/ionicons/blob/master/png/512/minus.png
<Grid Margin="0,0,0,0" >
<StackPanel Orientation="Horizontal" Height="32">
<StackPanel.Resources>
<ImageBrush x:Key="plusImage" ImageSource="/Resources/plus.png" />
<ImageBrush x:Key="minusImage" ImageSource="/Resources/minus.png" />
</StackPanel.Resources>
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource minusImage}}"/>
<TextBlock Margin="5,0,5,0"
VerticalAlignment="Top"
FontWeight="Bold"
Text="X" />
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource plusImage}}"/>
<Separator Margin="5,0,5,0" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource minusImage}}"/>
<TextBlock Margin="5,0,5,0"
VerticalAlignment="Top"
FontWeight="Bold"
Text="Y" />
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource plusImage}}"/>
<Separator Margin="5,0,5,0" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource minusImage}}"/>
<TextBlock Margin="5,0,5,0"
VerticalAlignment="Top"
FontWeight="Bold"
Text="Z" />
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource plusImage}}"/>
</StackPanel>
</Grid>
I'm creating a control to control the x, y, z positions of a point. As you can see in the image above, only one of the plus icons appears to be stretched.
Variations:
If I remove Z and the icons associated with it, the last plus icon for Y is NOT stretched
Removing the fontweight from Z makes the plus icon appear normal (not stretched)
What would cause an imagebrush to stretch an image like this?

You could set the UseLayoutRounding property on the RepeatButtons:
<RepeatButton Width="20" Height="20" UseLayoutRounding="True"
Background="{Binding Source={StaticResource plusImage}}"/>

Related

Set the button on top of the video streaming[WPF]

I use LibVLCSharp.WPF in a WPF application.
I want to put some icons and buttons above the video.
But after the VideoView control has loaded, it overwrite everything.
<Canvas Width="325" Height="182">
<Image Source="/Resource/BgLoading_1.png"
Width="325"
Height="182"
Stretch="Fill"
StretchDirection="Both"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Panel.ZIndex="0"
Visibility="Visible" />
<fa:ImageAwesome Foreground="White"
Icon="Spinner"
Spin="True"
Height="48"
Width="48"
Visibility="{Binding LoadImageStatus}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.Left="139"
Canvas.Top="67" />
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
<Image x:Name="imgRightIcon"
Width="30"
Height="30"
Source="{Binding RightIconSource}"
Stretch="Fill"
Margin="285,10,10,142"
Visibility="{Binding RightIconStatus}"
Panel.ZIndex="2" />
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Canvas>
RTFM
The controls that must appear on top of the video should be placed as children of the VideoView element.
<Window ...
xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
...>
<Grid>
<vlc:VideoView x:Name="VideoView">
<Button x:Name="PlayButton"
Click="PlayButtonOnClick"
Content="Play"
Margin="8"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</vlc:VideoView>
</Grid>
</Window>
Avoid Canvas since they are pretty dumb.
Working example sources based on the manual.
I haven't used vlc, if it covers the icons, I think it should be a window drawn with a separate handle. just like WindowsFormHost. try use Popup control, it can be displayed on top of any control.
<Grid>
<!--video control-->
<Grid Name="video">
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Grid>
<Popup PlacementTarget="{Binding ElementName=video}" Placement="Center">
<Grid>
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
</Grid>
</Popup>
</Grid>

Oxyplot (wpf) get rid of empty space to the right of PlotView

I'm using OxyPlot for WPF and the PlotView adds a space to the right of it instead of filling up the entire area as you can see in this picture:
I added the black box to show to where the PlotView should extend to.
But in the designer the PlotView does extrend so far:
Is this something that is fixable? Or is the only way to fix it is to "cheat" and instead of fitting controls together in a panel i just overlap the rightside over the PlotView.
<Grid Background="{StaticResource Milky}">
<DockPanel>
<Grid Height="50" Width="5" DockPanel.Dock="Left"/>
<Grid Height="5" Width="50" DockPanel.Dock="Top"/>
<Grid Width="122" DockPanel.Dock="Right" VerticalAlignment="Top">
<StackPanel>
<Border Margin="3" Height="248" Width="116" BorderThickness="1" BorderBrush="{StaticResource LightGrayGray}" CornerRadius="3">
<ItemsControl ItemsSource="{Binding Path=GraphLineItems}" HorizontalAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:GraphLineItemV DataContext="{Binding }" ColorPalette="{StaticResource MilkyPalette}">
</local:GraphLineItemV>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<Border Margin="3 0 3 3" Height="128" BorderThickness="1" BorderBrush="{StaticResource LightGrayGray}" CornerRadius="3">
<WrapPanel>
<local:IconButton Width="32" Command="{Binding Path=FitToFrameCmd}" ToolTip="{StaticResource ToolTipFitGraph}" Margin="1" Height="32" BorderThickness="1" IconHeight="28" IconWidth="28" ColorPaletteFore="{StaticResource DarkestGraySolid}" ColorPalette="{StaticResource MilkyGPalette}" Image="{StaticResource ZoomIcon}" IconMargin="1"/>
<local:IconButton Width="32" Command="{Binding Path=ClearGraphCmd}" ToolTip="{StaticResource ToolTipClearGraph}" Margin="1" Height="32" BorderThickness="1" IconHeight="24" IconWidth="24" ColorPaletteFore="{StaticResource DarkestGraySolid}" ColorPalette="{StaticResource MilkyGPalette}" Image="{StaticResource DeleteIcon}" IconMargin="4"/>
</WrapPanel>
</Border>
</StackPanel>
</Grid>
<Grid Height="80" DockPanel.Dock="Bottom">
<StackPanel>
<StackPanel Orientation="Horizontal">
<local:ColoredImage x:Name="zoomIcon" Image="{StaticResource ZoomIcon}" Width="24" Height="24" HorizontalAlignment="Left" VerticalAlignment="Top" Color="{StaticResource Gray}"/>
<Slider HorizontalAlignment="Left" Minimum="0.5" Maximum="85" VerticalAlignment="Top" Margin="0,5,0,0" Value="{Binding Zoom, UpdateSourceTrigger=PropertyChanged}">
<Slider.Width>
<MultiBinding Converter="{StaticResource Subtraction}">
<Binding Path="ActualWidth" ElementName="graph"/>
<Binding Path="ActualWidth" ElementName="zoomIcon"/>
</MultiBinding>
</Slider.Width>
</Slider>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
<TextBlock Text="Refresh rate: " HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox Text="{Binding UpdateInterval, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" PreviewTextInput="NumberValidationTextBox" MaxLength="3" FontFamily="{StaticResource MonoFont}" Width="28" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text=" (ms)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
<TextBlock Text="Saved length: " HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox Text="{Binding SavedLength, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" PreviewTextInput="NumberValidationTextBox" MaxLength="3" FontFamily="{StaticResource MonoFont}" Width="28" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text=" (s)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</StackPanel>
</Grid>
<Grid x:Name="grid">
<Canvas x:Name="canvas" Background="{StaticResource White}"/>
<Grid Background="Black" Width="20" Height="20" HorizontalAlignment="Right"/>
<oxy:PlotView x:Name="graph" Background="Transparent"/>
</Grid>
</DockPanel>
</Grid>
I guess you bind your PlotView to a PlotModel? In that case you can set the PlotModel's PlotMargins property to set the margins of the plot area within the plot view and assign values for all four sides independently.
In order to get completely rid of the margin at the right side, you need to assign a negative value.
I have created the plot below using this line
plotModel.PlotMargins = new OxyThickness(40, -8, -8, 35);
I have changed the general background color of the plot view to make it clearer.

DataTemplate only shows Canvas for the last record

I'm using the following DataTemplate
<DataTemplate x:Key="platform_resources">
<StackPanel Orientation="Horizontal">
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<ContentControl DataContext="{Binding}" Focusable="False" Content="{DynamicResource appbar_server}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=workload_count}"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<Viewbox Width="30" Height="30" ToolTip="Logical Network Count" Stretch="Uniform">
<ContentControl Focusable="False" Content="{DynamicResource appbar_network_server_connecting}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=vlan_count}"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<ContentControl Focusable="False" Content="{DynamicResource appbar_network}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=networkdomain_count}"/>
</StackPanel>
</DataTemplate>
The template displays all the relevant data with separators but only shows the images on the last record. It's leaves spaces where the images are supposed to be, but no images.
Make sure you add x:Shared="False" property to your resources.
Example:
<Canvas x:Key="appbar_server" x:Shared="False">
<!-- ... -->
</Canvas>
This happens because you probably defined some Images (e.g appbar_server) in your resources and trying to display them in multiple items. But Image is a Visual and in WPF each Visual can only have one parent. So when your items are being generated, each item steals the Image from the previous one until the last item finally gets it.
Solution:
Unlike Image, BitmapImage is not a Visual and thus can be set multiple times as the source of different items. So instead of defining Images in your Resources, define BitmapImages:
<Window.Resources>
<BitmapImage x:Key="appbar_server" UriSource="C:\...\appbar_server.png"/>
....
And then instead of ContentControls create Image instances in your DataTemplate to present them:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<Image Focusable="False" Source="{DynamicResource appbar_server}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=workload_count}"/>
...
*Update:
The image is captured in a canvas which seems to be needing some
special wrapper to make this work.
In that case, you should define a DataTemplate for each Canvas like this:
<Window.Resources>
<DataTemplate x:Key="appbar_3d_3ds">
<Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="32" Height="40" Canvas.Left="23" Canvas.Top="18" Stretch="Fill" Fill="Black" Data="F1 M 27,18L 23,26L 33,30L 24,38L 33,46L 23,50L 27,58L 45,58L 55,38L 45,18L 27,18 Z "/>
</Canvas>
</DataTemplate>
....
And then create ContentPresenter Instances in your ItemTemplate with their ContentTemplate set to your pre-defined data templates (e.g. appbar_3d_3ds).
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<ContentPresenter ContentTemplate="{DynamicResource appbar_3d_3ds}"/>
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=workload_count}"/>
....

Horizontal alignment in a button

Here's my code for the button:
<Button //namespaces
x:Class="myProject.MyButton"
FocusVisualStyle="{x:Null}"
Foreground="White"
Height="60"
Width="200"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Padding="0 0 1 1"
>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
#006BB7
</Border.Background>
<DockPanel Margin="3">
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Height="30" Stretch="Fill" Margin="0 0 0 0" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" FontSize="20" VerticalAlignment="Center" Padding="10,0,10,0" HorizontalAlignment="Left"/>
<Image Source="{DynamicResource ResourceKey=Bmp}" Height="30" Width="30" HorizontalAlignment="Right" Margin="0 0 10 0"></Image>
</DockPanel>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
When I call it like this:
<ui:MyButton x:Name="btnGo" Tag="/Resources/Go.png" Content="Go" Command="{Binding Path=GoCommand}" Margin="20 0 0 0"/>
and everything looks like I want it to look: the first image isn't shown, and the third part of the button (the second image) is aligned right.
However, here:
<ui:MyButton Margin="10" Content="{Binding MyName}" Tag="{Binding Path}" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button.Resources>
<BitmapImage x:Key="Bmp" UriSource="/Images/arrowRight.png"></BitmapImage>
</Button.Resources>
</ui:MyButton>
Whn I call the button like this, the text and the second image aren't shown. All that is shown is the first image and it is stretched via the whole button's width. Why is this happening? I want to make this to behave as the other one.
Try this
In Change content of Image and of TextBlock when the Image and the TextBlock are in a button we are using resource for button and here we are using for <ui:MyButton>
<ui:MyButton Margin="10" Content="{Binding MyName}" Tag="{Binding Path}" HorizontalAlignment="Center" VerticalAlignment="Top">
<ui:MyButton.Resources>
<BitmapImage x:Key="Bmp" UriSource="/Images/arrowRight.png"></BitmapImage>
</ui:MyButton.Resources>
</ui:MyButton>

silverlight 5: force grid being in sync before screen-capture via writeablebitmap

In silverlight 5: I have built a product configurator that also constructs a drawing via combination of image's and Rectangle,Ellipse,Polygon constructions.
The configurator works fine and the drawing is fine as well. When a product is ready it's placed in a gallery (List box) and a thumbnail of the drawing is showing along with some main information. So far so good.
I can also save the configurations that are placed in the gallery to disc (xml) and load them later on to continue and finish. Here is the problem. I read the products one by one to the configurator, all business rules are in place then and the drawing takes place. But at the moment I save the product to the gallery the snapshot of the drawing stays blank.
I'm sure that all steps are fine because when I break at the point before placing the product in gallery, the drawing is showing correct. However, in the gallery the drawing is blank. So I assume a sync/timing/update problem but can't find a way to force redrawing of the grid that contains the images and drawings.
In axml, the listbox:
<ListBox x:Name="lbTiles" Loaded="lbTiles_Loaded" HorizontalAlignment="left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Margin="2,2,0,0" Height="233" Width="892" d:LayoutOverrides="HorizontalAlignment" Background="Gainsboro" BorderThickness="2" BorderBrush="#FF606060">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Vertical" Background="Gainsboro">
<Border BorderThickness="1" BorderBrush="#4F000000" >
<Grid >
<Image Margin="0,0,0,0" Source="{Binding mImage, Mode=OneWay}" Stretch="Uniform" Height="110" ></Image>
</Grid>
</Border>
<TextBox TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mName, Mode=OneWay}" IsHitTestVisible="False" IsTabStop="False" FontSize="11" />
<TextBox TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mPrice, Mode=OneWay}" IsTabStop="False" IsHitTestVisible="False" FontSize="11" />
<TextBox TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mTotal, Mode=OneWay}" IsHitTestVisible="False" IsTabStop="False" FontSize="11" />
<TextBox TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mFreight, Mode=OneWay}" IsHitTestVisible="False" IsTabStop="False" FontSize="11" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The grid:
<Grid Name="myDrawing" Background="Gainsboro" Height="437" Width="486">
<Rectangle Name="clrFrame" Visibility="Collapsed" Margin="27,5,32,5" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL1" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL0" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
<Rectangle Name="clrWindow_1" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
<Rectangle Name="clrWindow_2" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
<Rectangle Name="clrWindow_3" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
<Ellipse Name="clrWindow_4" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" />
<Polygon Name="clrWindow_5" Visibility="Collapsed" StrokeThickness="18" IsHitTestVisible="False"></Polygon>
<Rectangle Name="clrDoor" Visibility="Collapsed" Margin="136,196,162,122" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL2" VerticalAlignment="Top" Width="429" IsHitTestVisible="False"/>
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL3" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL4" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL5" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL6" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
</Grid>
C# Code
for( int i = 0; i < count i++ )
{
xmlread al values to currentCasingComposition.....
writeToScreen(); // apply businessrules and do the drawing
myDrawing.InvalidateMeasure();
myDrawing.InvalidateArrange();
myDrawing.UpdateLayout();
// an exit here leaves me with the product in de confugurator and the drawing is fine
WriteableBitmap bmp = new WriteableBitmap(myDrawing, null); // capture drawing
currentCasingComposition.mImage = bmp;
currentCasingComposition.mImage.Invalidate();
currentCasingComposition.calculatePrice();
ocCasingCompositions.Add(currentCasingComposition); to gallery via ObservableCollection
}
Who knows the solution?
BR, Ton
UpdateLayout() is asynchronous on the UI thread, so you should wait for it to complete before calling the rest of the block. Unfortunately, I can find nothing on how to get notified when UpdateLayout() completes. All the examples that refer to it use a DispatcherTimer to wait a second or so before carrying on. So what I would do is create a one-off dispatcher timer, set its interval to 1000 milliseconds (or less, as needed) , and execute the rest of your code on it Tick event.

Resources