I have a basic WPF windows with the markup as specific below:
<Window x:Class="Application.SomeWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SomeWindow"
Topmost="True" WindowStyle="None" Height="39" Width="400"
ResizeMode="NoResize" ShowInTaskbar="False"
WindowStartupLocation="Manual" Background="Transparent"
Closing="Window_Closing" AllowsTransparency="True" Opacity="0">
<Border Background="CornflowerBlue" BorderBrush="Black" BorderThickness="0,0,0,0" CornerRadius="5,5,5,5" Opacity="0.75">
<Grid>
<!-- Display bar -->
<Image Grid.Row="1" Height="24" Margin="7,7,0,0" Name="img1" Stretch="Fill" VerticalAlignment="Top" Source="/Application;component/Images/dashboard/1.png" HorizontalAlignment="Left" Width="13" />
<Image Height="24" Margin="19,7,47,0" Name="image21" Source="/Application;component/Images/dashboard/2.png" Stretch="Fill" VerticalAlignment="Top" Grid.Row="1" Grid.ColumnSpan="2" />
<!-- Button 1 -->
<Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,25,0" Name="btn1" Click="btn1_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="1">
<Image Height="26" HorizontalAlignment="Right" Name="img1" Source="/Application;component/Images/dashboard/3.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
</Button>
<!-- Button 2 -->
<Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,5,0" Name="btn2" Click="btn2_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="2">
<Image Height="26" HorizontalAlignment="Right" Name="img2" Source="/Application;component/Images/dashboard/4.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
</Button>
</Grid>
</Border>
</Window>
Here is what it looks like now:
What I'd really like to do is make it so that initially looks like this:
Then, once mouseover happens, to fade background opacity in from 0 so it looks like the first image. The problem is that if I set the Border or Grid Background color to Transparent with the goal of fading in on mouseover, then everything inside the Border or Grid is affected as well.
Is there a way to manage the opacities of window and its UI elements seperately? Or perhaps there is a totally different route to take to get this background fade on mouseover? Thanks.
There are two options. Number one is to just move the outer border inside the grid, as the first child (and have the other controls alongside it, not in it). That way it will fade by itself, but still be behind the other controls. You will of course either have to set ColumnSpan/RowSpan, or wrap the entire thing in another Grid.
The second option is to just fade the background, not the entire border:
<Border ...>
<Border.Background>
<SolidColorBrush Color="CornflowerBlue" Opacity="0.5"/>
</Border.Background>
...
try this trick - draw a rectangle or border with dimensions bind to parent or ElementName.
It won't affect rest of elements of tree. Works for me.
<Grid x:Name="abc">
<Border
Width="{Binding ActualWidth, ElementName=abc}"
Height="{Binding ActualHeight, ElementName=abc}"
Background="Blue"
Opacity="0.5"/>
//buttons or inner grid
...
</Grid>
If you don'w want to use ElementName, simply replace Width and Height by
Width="{Binding ActualWidth, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
Height="{Binding ActualHeight, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
Related
I have a little question. I'm new to WPF and a strange thing happened to me. In the designer everything looks fine, but as soon as I start the application, a piece ,,cuts off"(via.photo) and it looks pretty bad. Could it be that the application is not responsive?
My XAML code:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}" Height="Auto"
Width="Auto"
>
<Border
Background="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="1340"
Height="1100"
CornerRadius="20"
>
<Border
Background="White"
CornerRadius="20"
Height="700"
Width="500"
Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"
>
<Grid
>
<TextBlock
Text="Welcome"
Width="200"
Height="200"
Foreground="Black"
FontSize="50" FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"
>
</TextBlock>
</Grid>
</Border>
</Border>
</TabItem>
After what I edited app:
Your code has a few issues:
You're hardcoding the Margin values to position your controls. Instead, you should use proper panels (DockPanel, WrapPanel, and Grid). Use Margin property to set margin, not a position.
Use HorizontalAlignment and VerticalAlignment properties to position your elements, thus your UI would be more responsive and user-friendly.
To be able to view, how your window and its content would look like - try to set d:DesignHeght and d:DesignWidth properties on a window. Try to Google how to use them.
In the end, your code should look like following:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}"> <!-- Properties order is a bit confusing, it is better to order them by priority, or just alphabetically. -->
<Border Background="Black">
<Border Background="White"
CornerRadius="20"
Margin="0,0,93,118"> <!-- Should it have such values? Maybe just somenthing like Margin="0 0 90 120"? -->
<Grid>
<TextBlock Text="Welcome"
Foreground="Black"
FontSize="50"
FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"/>
</Grid>
</Border>
</Border>
</TabItem>
I am developing a WPF application that allows to connect two peers in a video chat. I have been designed the UI in the XAML designer for the last two months and everything went fine, when I ran the application it did show everything etc. Until yesterday, for absolutely no apparent reason.
Some part of the UI just does not show up anymore WHEN the code is running on another laptop. I insist on the fact that it did work before and now not anymore. I also did not change anything in the code that could have anything to do with that part of the UI, nor in the xaml.
I did check that I never mess up with any Visibility parameter in the code-behind as well, so I don't see any reason why the behavior of the application suddenly changed.
Does anyone have an idea why this would happen?
Here is the xaml:
<Window x:Class="RealSenseiConfFusion.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="1000" Width="1500"
WindowStartupLocation="Manual"
Left="0" Top="0"
Closing="Window_Closing"
Loaded="Window_Loaded" >
<Grid Background="LightSteelBlue">
<Rectangle Margin="10,10,498.6,0" Name="rectangle1" Stroke="Black" RadiusX="9" RadiusY="9" Fill="LightSlateGray" Height="142" VerticalAlignment="Top" />
<Grid Name="callAndSyncGrid" Margin="26,24,1165,835" Background="LightGray">
<StackPanel>
<TextBlock HorizontalAlignment="Center">ABOUT CALL</TextBlock>
<TextBlock Name="myIpTextBlock">Your ip is:</TextBlock>
<Grid Name="callGrid">
<TextBox Height="23" HorizontalAlignment="Left" Name="txtIP" Background="GhostWhite" Foreground="Black" Width="221" />
<Button Height="23" HorizontalAlignment="Right" Name="btnCall" Width="75" Click="btnCall_Click">Call</Button>
</Grid>
<Button Name="btnSync" Content="Start Synchronization" HorizontalAlignment="Left" Width="120" Height="25" Click="btnSynchronize_Click"/>
<TextBlock Name="currentConvText"></TextBlock>
</StackPanel>
</Grid>
<Grid Name="visSetupGrid" Margin="650,24,515,835" Background="LightGray">
<StackPanel>
<TextBlock HorizontalAlignment="Center">VISUALIZATION SETUP</TextBlock>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 1:</TextBlock>
<ComboBox Name="vis1Combo" HorizontalAlignment="Right">
<ComboBoxItem IsSelected="True">Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem>Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem>Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 2:</TextBlock>
<ComboBox Name="vis2Combo" HorizontalAlignment="Right">
<ComboBoxItem>Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem>Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem IsSelected="True">Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 3:</TextBlock>
<ComboBox Name="vis3Combo" HorizontalAlignment="Right">
<ComboBoxItem>Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem IsSelected="True">Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem>Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Button Name="btnVisApply" HorizontalAlignment="Center" Click="btnVisApply_Click">Apply!</Button>
</StackPanel>
</Grid>
<Grid Name="otherPeerVideo" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1000" Height="700" Margin="0,83,0,0">
<Grid Width="960" Height="540">
<Border BorderBrush="DarkOrange" BorderThickness="4">
<WindowsFormsHost Name="wfServer"/>
</Border>
</Grid>
</Grid>
<StackPanel Name="feedbackAndMyVideoStackPanel" Background="WhiteSmoke" Margin="1000,83,0,0" VerticalAlignment="Top" Width="454" Height="800">
<Grid Name="vis1Grid" Height="160"></Grid>
<Grid Name="vis2Grid" Height="160"></Grid>
<Grid Name="vis3Grid" Height="160"></Grid>
<Grid Name="myVideoGrid" VerticalAlignment="Bottom" Height="320">
<Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="454" Height="300">
<Border BorderBrush="Blue" BorderThickness="4">
<WindowsFormsHost Name="myVideo" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="446" Height="292"/>
</Border>
</Grid>
<Button Name="myVideoHideButton" Click="myVideoHideButton_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Width="80" Height="20">Hide/Unhide</Button>
</Grid>
</StackPanel>
</Grid>
Here is a screenshot of how it looks like in the designer (on both machines):
Here is a screenshot of how it looks like when the application is running on my machine:
And here a screenshot of how it looks like when the application is running on the laptop:
I compiled/tried your code.
When the window gets small, many components disappear.
Because of the margins.
Example of margins replacement
Before :
With margins for placement
<Grid Name="callAndSyncGrid" Margin="26,24,1165,835" Background="LightGray">
<!-- ... -->
</Grid>
<Grid Name="visSetupGrid" Margin="650,24,515,835" Background="LightGray">
<!-- ... -->
</Grid>
After
With margins for "breathing"
Placement is made with two columns (ColumnDefinitions and Grid.Column="1"; 0 by default).
Here each Column takes 50 % (50*) of the available room.
You can also express the size as "Auto" or 323 (hardcoded size)
<Grid Name="parentGridForLayout" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Grid Name="callAndSyncGrid" Margin="10" Background="LightGray">
<!-- ... -->
</Grid>
<Grid Name="visSetupGrid" Margin="10" Background="LightGray">
<!-- ... -->
</Grid>
</Grid>
Advice
Using Grid+margin or Canvas are pretty close approaches. But with Grid you can create Columns and Rows to organize layout. And you can compose Grids(or other Panels like StackPanels, DockPanels, WrapPanels) into Grids for organizing the layout.
Disclaimer :
My piece of code alone is not enough.
You need to organize all your GUI, with many panels.
I would recreate the window from scratch : empty page, then put a first Grid (or any suitable Panel), split it with columns or rows. Then put some content imported from previous window at the grid level then go in the children grid to put some more grids/imported content
Regards
As #HighCore and #Emmanuel DURIN pointed out, the problem was that I defined the layout with Margins, which can lead to big trouble if I run the application on different screen sizes.
To correct this, I used Canvas'es in order to place every element with respect to their containers.
Now I can use the application on different screens and everything gets displayed as I want it.
Here the better layouted UI for reference:
<Window x:Class="RealSenseiConfFusion.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="860" Width="1500"
WindowStartupLocation="Manual"
Left="0" Top="0"
Closing="Window_Closing"
Loaded="Window_Loaded" >
<Grid Background="LightSteelBlue">
<Canvas>
<Canvas Canvas.Top="10" Canvas.Left="10" Width="980" Height="142">
<Rectangle Width="980" Height="132" Name="rectangle1" Stroke="Black" RadiusX="9" RadiusY="9" Fill="LightSlateGray" VerticalAlignment="Top" />
<Grid Name="callAndSyncGrid" Canvas.Top="15" Canvas.Left="15" Width="200" Background="LightGray">
<StackPanel>
<TextBlock HorizontalAlignment="Center">ABOUT CALL</TextBlock>
<TextBlock Name="myIpTextBlock">Your ip is:</TextBlock>
<Grid Name="callGrid">
<TextBox Height="23" HorizontalAlignment="Left" Name="txtIP" Background="GhostWhite" Foreground="Black" Width="221" />
<Button Height="23" HorizontalAlignment="Right" Name="btnCall" Width="75" Click="btnCall_Click">Call</Button>
</Grid>
<Button Name="btnSync" Content="Start Synchronization" HorizontalAlignment="Left" Width="120" Height="25" Click="btnSynchronize_Click"/>
<TextBlock Name="currentConvText"></TextBlock>
</StackPanel>
</Grid>
<Grid Name="visSetupGrid" Canvas.Top="15" Canvas.Right="15" Width="200" Background="LightGray">
<StackPanel>
<TextBlock HorizontalAlignment="Center">VISUALIZATION SETUP</TextBlock>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 1:</TextBlock>
<ComboBox Name="vis1Combo" HorizontalAlignment="Right">
<ComboBoxItem IsSelected="True">Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem>Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem>Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 2:</TextBlock>
<ComboBox Name="vis2Combo" HorizontalAlignment="Right">
<ComboBoxItem>Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem>Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem IsSelected="True">Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 3:</TextBlock>
<ComboBox Name="vis3Combo" HorizontalAlignment="Right">
<ComboBoxItem>Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem IsSelected="True">Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem>Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Button Name="btnVisApply" HorizontalAlignment="Center" Click="btnVisApply_Click">Apply!</Button>
</StackPanel>
</Grid>
</Canvas>
<Grid Name="otherPeerVideo" HorizontalAlignment="Left" Canvas.Top="150" Canvas.Left="20">
<Grid Width="960" Height="540">
<Border BorderBrush="DarkOrange" BorderThickness="4">
<WindowsFormsHost Name="wfServer"/>
</Border>
</Grid>
</Grid>
<StackPanel Name="feedbackAndMyVideoStackPanel" Background="WhiteSmoke" Canvas.Right="15" Canvas.Top="15" VerticalAlignment="Top" Width="454" Height="800">
<Grid Name="vis1Grid" Height="160"></Grid>
<Grid Name="vis2Grid" Height="160"></Grid>
<Grid Name="vis3Grid" Height="160"></Grid>
<Grid Name="myVideoGrid" VerticalAlignment="Bottom" Height="320">
<Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="454" Height="300">
<Border BorderBrush="Blue" BorderThickness="4">
<WindowsFormsHost Name="myVideo" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="446" Height="292"/>
</Border>
</Grid>
<Button Name="myVideoHideButton" Click="myVideoHideButton_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Width="80" Height="20">Hide/Unhide</Button>
</Grid>
</StackPanel>
</Canvas>
</Grid>
I have a WPF window that hosts a simple layout of a home button, top row of buttons and a video feed
but when I maximise the window. the layout is out of sync with the standard view.
I have tried to remedy some of the layout by setting the image element to stretch "fill" but the top row of buttons don't look uniform also the home button relocates to the center of the screen which doesn't look good
My question I how would I adjust the xaml layout properties to support standard and maximised view?
This is the layout for the window:
<Window x:Class="KinectKickboxingBVversion1.TrainingFrm"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TrainingFrm" Height="377.612" Width="637.313" Loaded="Window_Loaded">
<Grid>
<StackPanel Orientation="Horizontal" >
<Button x:Name="jabBtn" Background="BlueViolet" Content="Jab" Width="100" Height="50" Click="jabBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<Button x:Name="crossBtn" Background="BlueViolet" Content="Cross" Width="100" Height="50" Click="crossBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<Button x:Name="jabCrossHookBtn" Background="BlueViolet" Content="Jab-Cross-Hook" Width="100" Height="50" Click="jabCrossHookBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<Button x:Name="pKickBtn" Content="Push Kick" Background="BlueViolet" Width="100" Height="50" Click="pKickBtn_Click" HorizontalAlignment=" Center" VerticalAlignment="Top"/>
<Button x:Name="blockBtn" Content="Kick Block" Background="BlueViolet" Width="100" Height="50" Click="blockBtn_Click" HorizontalAlignment=" Center" VerticalAlignment="Top"/>
<Label Content="SCORE: " x:Name="lblScore" Visibility="Collapsed"/>
<TextBlock x:Name="tblkScore" />
</StackPanel>
<Viewbox Grid.Row="1" Stretch="Uniform" HorizontalAlignment="Center">
<Image x:Name="KinectVideo" Width="640" Height="250" Visibility="Visible" Stretch="Fill" />
</Viewbox>
<Button x:Name="homeBtn" Content="" Width="50" Click="homeBtn_Click" Height="35" Margin="272,294,277,10" >
<Button.Background>
<ImageBrush ImageSource="Images/ContentIcon.png" />
</Button.Background>
</Button>
</Grid>
</Window>
Your buttons are all a fixed size. StackPanel just plonks them next to each other, so when your screen size is bigger, you end up with space left over on the right.
Same with your home button. It's being positioned via the absolute margins.
You could make your layout fluid by using 6 grid columns for the top buttons, and removing the margins on the home button and just setting it to HorizontalAlignment="Center" VerticalAlignment="Bottom".
However, this will still result in effectively smaller text on the buttons. If you want the display to always have the same proportions it may be easier for you to simply plonk the whole thing in a ViewBox.
use grid instead of stackpanel and set the column width to "*" and put your buttons in that grid
I'm having a lot of trouble trying to get this working, and was hoping someone could help.
I have a ScrollViewer in my WindowsPhone app, and I'm trying to emulate a similar control to the "Date/Time Chooser" that you'd see in the native Calendar app. So my ScrollViewer contains a StackPanel with multiple square Canvases with rectangles and TextBlocks. My intent is to watch the "ScrollStates", and when the VisualState changes to "NotScrolling", I'd then check the VerticalOffset of the ScrollViewer and animate a slide to the nearest "snap-to" position (ie. aligning the square to the correct/middle position).
<ScrollViewer Name="sv" Width="100" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Disabled" Loaded="ScrollViewer_Loaded">
<StackPanel>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="1" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="2" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="3" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
...
</StackPanel>
</ScrollViewer>
I've been looking at various examples that hook into the VisualStates, like http://blogs.msdn.com/b/ptorr/archive/2010/07/23/how-to-detect-when-a-list-is-scrolling-or-not.aspx ; http://developingfor.net/2009/02/16/fun-with-the-wpf-scrollviewer/ ; http://blogs.msdn.com/b/slmperf/archive/2011/06/30/windows-phone-mango-change-listbox-how-to-detect-compression-end-of-scroll-states.aspx ... all seem to have similar code to this:
// Visual States are always on the first child of the control template
FrameworkElement element = VisualTreeHelper.GetChild(sv, 0) as FrameworkElement;
... which then goes on to seek out VisualStateGroup group = FindVisualState(element, "ScrollStates");, from which they can hook an Event to when it changes.
However... whenever I try doing the VisualTreeHelper.GetChild(sv,0) as FrameworkElement, the app crashes with an exception of type 'System.ArgumentOutOfRangeException'. If I output VisualTreeHelper.GetChildrenCount(sv), it is always "0". How is it seemingly working for everyone else? 8)
Any help would be greatly appreciated. Thanks!
(As an alternative, has anyone made this kind of "Select Box" already in a reusable control I could use instead of trying to reinvent it?)
Did you wait till the scrollviewer's Loaded event fires before trying to get the scrollviewer children??
I have a user control that is just a box with text like this:
<Border x:Name="box"
BorderThickness="0"
BorderBrush="Black"
Background="Black"
Width="200" Height="200">
<Label Content="Hello World"
Height="65" Width="400"
Foreground="White" FontSize="32"
HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" />
</Border>
When I create and instance of it in my MainWindow like this...
<local:MyBoxControl Width="1000" Height="1000"/>
the width and height is 200x200 as defined in the Border when I'd like it to be 1000x1000 as provided when I create it.
Just remove the Width and Height from the Border element.
Would it be acceptable for you to set the HorizontalAlignment and VerticalAlignment of the Border to Stretch?
Assuming you need the width/height of the border to remain at 200 (otherwise you just wouldn't specify it) you can make a grid the outermost element of the control and put the border inside it. Then if you don't define a width/height on that it will auto-adjust to the size of your control.
<Grid>
<Border x:Name="box"
BorderThickness="0"
BorderBrush="Black"
Background="Black"
Width="200" Height="200">
<Label Content="Hello World"
Height="65" Width="400"
Foreground="White" FontSize="32"
HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" />
</Border>
</Grid>