Display a VisualBrush from a hidden control - wpf

I got the following xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="_sampleText"
Grid.Row="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Width="200"
Height="50"
FontSize="36"
Text="Hello world"
TextAlignment="Center"
Visibility="Collapsed" />
<Border Grid.Row="1"
Width="{Binding ActualWidth, ElementName=_sampleText}"
Height="{Binding ActualHeight, ElementName=_sampleText}">
<Border.Background>
<VisualBrush Stretch="None"
Visual="{Binding ElementName=_sampleText}" />
</Border.Background>
</Border>
</Grid>
I want my visual to be render even if the control he bind too is not visible. Is there a way of doing that?

You could also place the TextBlock in a Border and make that Hidden:
<Border Visibility="Hidden">
<TextBlock ... />
</Border>

No. If the Visibility=Collapsed then it won't take part in the measure/arrange layout pass and not be rendered (the Width and Height will be 0).
What effect are you trying to achieve? It looks like you want a preview pane? Reply in the comments and we can figure out the best approach.
Edit: There is a way to call the measure/update on a UIElement from code-behind however I think the best-approach for you would be use a BoolToVisibilityConverter.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<CheckBox x:Name="OptionCheckBox" Grid.Row="0" />
<Border Grid.Row="1" Visibility="{Binding Path=IsChecked, ElementName=OptionCheckBox", Converter={StaticResouce BoolToVisibilityConverter}}">
<TextBlock Width="200" Height="50" FontSize="36" Text="Hello world" TextAlignment="Center"/>
</Border>
</Grid>

Related

ScrollViewer - scroll does not work with images inside ScrollViewer

I have a ScrollViewer, inside of which is some content. The problem is that the scroll doesn't work properly. When you scroll the content with your finger and then release, the scrollable area always snaps back to the top. It just bounces like elastic, and won't stay at the bottom where you scrolled it to.
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<StackPanel>
<Grid VerticalAlignment="Top">
<Button Margin="0" Padding="0" Click="CloseDetailPanel" HorizontalAlignment="Right" >
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
</Grid>
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Top">
<Grid>
<StackPanel>
<TextBlock Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</Grid>
I've actually had a similar problem before, which I managed to solve with help from Stack Overflow... and yet, here I am again, asking for help on the same topic...
thanks heaps!
UPDATE:
Based on suggestions, I removed the StackPanels and replaced them with Grids. The formatting is perfect, but I still have the same scroll problem! The content still snaps back to the beginning!
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="0" Padding="0" Click="CloseDetailPanel" HorizontalAlignment="Right" >
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
</Grid>
<Grid Grid.Row="1">
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Grid.Row="1" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Grid.Row="2" Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Grid.Row="3" Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</Grid>
</ScrollViewer>
</Grid>
</Grid>
Its because of the stackPanel, try replacing it with something else like Grid.
Try this, I removed a redundant grid and added stretched alignment for the scroll viewer:
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Click="CloseDetailPanel" HorizontalAlignment="Right" VerticalAlignment="Top">
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Stretch" Grid.Row="1"HorizontalAlignment="Stretch">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Grid.Row="1" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Grid.Row="2" Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Grid.Row="3" Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</Grid>
</ScrollViewer>
</Grid>
What solved this, in the end, was adding a static height to the ScrollViewer. I realise noone could have seen this as I omitted the part of the code that shows that this is inside a PivotItem.
According to this discussion: http://forums.create.msdn.com/forums/t/84933.aspx a ScrollViewer stops working properly when it is inside a Pivot, unless it has a static height defined.
Infuriating!

StackPanel to Grid

How to convert stackpanel to grid?
<DataTemplate >
<Grid Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image delay:LowProfileImageLoader.UriSource="{Binding image_uri}" Width="50" Height="50" VerticalAlignment="Top" Stretch="None" />
<StackPanel Grid.Column="1" >
<Line Stroke="#4284B0" StrokeDashArray="4 2" X2="380"/>
<TextBlock Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="{StaticResource PhoneHorizontalMargin}" MinHeight="20" Text="{Binding author_name}">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Text="{Binding text}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="{StaticResource PhoneHorizontalMargin}" MinHeight="40" MaxHeight="180"/>
<TextBlock Text="{Binding Date_Time}" Style="{StaticResource PhoneTextSmallStyle}" Margin="{StaticResource PhoneHorizontalMargin}" Height="20" HorizontalAlignment="Left" Width="133"/>
<TextBlock Text="{Binding likes_count}" Style="{StaticResource PhoneTextSmallStyle}" Margin="181,-20,0,0" Height="20" Width="77" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding comm_count}" Style="{StaticResource PhoneTextSmallStyle}" Margin="289,-20,0,0" Height="20" Width="77" HorizontalAlignment="Left"/>
<Image Height="21" Margin="154,-19,0,0" Source="/Images/like.png" HorizontalAlignment="Left" Width="20"/>
<Image Source="/Images/ico_comments.png" Stretch="Fill" HorizontalAlignment="Left" Width="21" Margin="264,-19,0,0" />
</StackPanel>
</Grid>
</DataTemplate>
I don't know how to do this.I tried :
<Grid Grid.RowSpan="5" Margin="5,0,0,0" VerticalAlignment="Top" Width="380" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Line Grid.RowSpan="0"
But my content look like it cobbled together in a bunch.Please help me.
I want to convert because I need to improve performance.
Considering you're using TextWrapping, and by that seems to require a dynamic height, using a Grid wouldn't do much different from using a stackpanel.
And if you can't figure out how to use a Grid, I'll recommend you read a tutorial, and perhaps install Expression Blend.
This isn't quite the right place to post some code, and expect people to convert it for you.
I'm assuming you want everything that was in the StackPanel to now be in a Grid.
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<!--Add as many row definitions as you need-->
</Grid.RowDefinitions>
<Line Grid.Row="0" />
<TextBlock Grid.Row="1" />
<!-- The rest of your TextBlocks, Images etc. add a row number for each-->
</Grid>
<Grid x:Name="LayoutRoot" Background="Aqua" Margin="20" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Ellipse Fill="Red" Stroke="Black" MinWidth="75" MinHeight="75" Grid.Row="0" Stretch="Uniform"/>
<Ellipse Fill="#FF57F61F" Stroke="Black" MinWidth="75" MinHeight="75" Grid.Row="1"/>
<Ellipse Fill="#FF3D13F0" Stroke="Black" Width="75" Height="75" Grid.Row="2"/>
</Grid>

How can I get my custom WPF usercontrol to bind to the content property?

I have the following as a custom user control:
<UserControl x:Class="TestGUI.TBorder">
<Border Style="{StaticResource brdListBoxItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="5" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Style="{StaticResource tblTitleDataStyle}"
Text="{Binding Header, Mode=OneWay}" />
<Rectangle Grid.Row="1"
Grid.Column="0"
Margin="5,2"
Fill="{StaticResource BlueTextBrush}"
Height="1"
HorizontalAlignment="Stretch" />
<ContentPresenter Name="ccpMain"
Grid.Row="2"
Grid.Column="0"
Content="{Binding Content}" />
<!--<TextBlock Grid.Row="2"
Text="TEST HERE" />-->
</Grid>
</Border>
If I comment out the "ContentPresenter", and uncomment the "TextBlock", it appears as expected. If I have it as set, then only thing that displays is whatever is inside of the tags. For example:
<local:TBorder Grid.Row="2"
Grid.Column="0" Width="300"
Header="The Header">
<TextBlock Text="astnouhe" />
</local:TBorder>
displays only the "TextBlock".
Can someone explain this to me?
Thanks for any help.
What did you set the content to? If you are setting it to the XAML that you have in your question, then what it is doing is trying to display the text itself in your control.
You'll need to create another control that uses the XAML in your answer, and set that to the content of your user control in order to display those controls in side the user control.

Fill panel with rectangles

I want to fill a panel with rectangles, and when the panel is resized, the rectangles should resize as well.
Why doesn't the following work?
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle Fill="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Rectangle Fill="Green" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Rectangle Fill="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</StackPanel>
</Page>
I would prefer not to use a Grid because of the pain of adding/removing columns and rearranging the children. (I was looking forward to StackPanel because if I wanted to add a yellow Rectangle at the beginning, I just declare it. I don't have to re-order the others by hand.)
Or a UniformGrid:
<UniformGrid Columns="1">
<Rectangle Fill="Red"/>
<Rectangle Fill="Green"/>
<Rectangle Fill="Blue"/>
</UniformGrid>
You're using a StackPanel whose behavior is to take the size of its children. Use a Grid which takes the whole available size:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Fill="Red" Grid.Row="0" />
<Rectangle Fill="Green" Grid.Row="1" />
<Rectangle Fill="Blue" Grid.Row="2" />
</Grid>

How can I scroll on scaled control?

I need a zooming mechanism. So I found one on Zoom control to WPF Form which seem to be suitable for me.
I have made a slider and apply ScaleTransform.
My questions is: Is there any way I can wrap this into a scroll viewer so that I could scroll to the enlarged part that is not visible anymore ?
Thanks in advance
Daniel
Yes, you can wrap anything in a scrollviewer.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Slider Grid.Row="0" Grid.Column="0" x:Name="slider" Minimum="1" Maximum="10" />
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<TextBlock Grid.Column="0" Text="1234567890" Background="Yellow">
<TextBlock.LayoutTransform>
<ScaleTransform ScaleX="{Binding Path=Value, ElementName=slider}" ScaleY="{Binding Path=Value, ElementName=slider}" />
</TextBlock.LayoutTransform>
</TextBlock>
</ScrollViewer>
</Grid>

Resources