Pop up and tabs control in Expression Blend

I found this on the forum and thought it could be very helpful. Let me know if it is!
QUESTION:
Hello,I have a question about the Popup. I don't see any object which is inside of the Popup control. Let's say if I have a grid with a few buttons inside a Popup, those objects would not be visible. Right now, my work around is that I comment out Popup tags temporarily (beginning and end separately) so I can see my grid with buttons, will do my changes and uncomment Popup tags, so I can test my application. The behavior of the Popup is exactly the same as the TabControl (see my other post about TabControl display problem). During the design time Popup content is not visible. On the run time everything shows properly.Is it a bug, or my Blend 2.5 is not installed properly?Thank you,Adam

ANSWER:
Adam,If you select your Popup object in Objects and Timeline tree, see if the Width and Height values on the Layout palette are zero. If they are, click on the crossed-arrow buttons to the right of the Width and Height to set them to Auto. Now you should be able to see your Popup and the objects inside it. Let me know if that works for you.Jonathan [MSFT]

Pop up or drop down in silverlight 2.0 beta 2

It took me SO long to find out how to make this! I was lucky enough to have the help of Jeetendra from the Microsoft forum. Here is a link to the blend project so you can download it yourself and see how it works. It is easily customized and don't forget to ask any questions if needed!

ComboBox customize - and mouse states

So make a normal combobox (from the asset library). Now right click it and choose 'Edit Control Parts (Template)' and Edit Copy. Name it whatever you feel like. Now right click [ToggleButton].
and do the same. now there should be something called Chrome that is a ButtonChrome. you can either change the colors to your choce or if you are like me and want a round cornered button then you have to make 'Chrome' have invisible colors. Dont change the Opacity under the appearance panel. You have to choose every color that 'Chrome' has and change the 'A' to 0% (remember.. for every color stop it has). So now it is invisible. Now you double click the grid (in objects and timeline) then make a square. Make the square so it is a little larger than Chrome was so it can cover it completely. You might have to move the square behind any text that you had in the button. Now round the corners (of the square) as you want them. YAY! you have a customized combobox button! Hmmm but you want to have some sort of roll over effect right?

Here is how you give it some custom mouse states.

Stay where you are inside of the combobox. (or read the top and go back to where you were). Now add a timeline named MouseOver. Change the square to the color you want to see when the mouse is over the button. now make another timeline named MouseDown. Do the same. Ok now you want these to work. So look at your trigger pallet. Click on IsMouseOver=True. Press plus sign next to 'Actions when activating' . Now use the little drop down adn choose the timeline you just created named MouseOver. Keep the other part as 'Begin'. Now scroll down a little and do the same for 'Actions when Deactivating' but choose your timeline MouseOver and instead of Begin choose Stop. Try it out!! Your mouse over state should work great! Now you need to do the same for your MouseDown timeline except you need to add a property under the triggers pallett. change 'IsChecked' to IsPressed' and do the same as above except choose your timeline MouseDown. Then when you are done test it! YAY! Let me know if you have any questions or suggestions!

Sliding / Scrolling Viewer

Thanks to WilliamStacey over at the Blend Forum for help on this:

Make a StackPanel inside a ScrollViewer. Make the StackPanel layout horizontal and add your pictures or icons or whatever you want! Size it to view all (Auto for W and H). Set your ScrollViewer to Horizontal scrollbar and remove Vertical scrollbar. You could add your own custom buttons below to scroll using events.

There is also a ButtonGallary sample in Blend 2 (under Help/WelcomeScreen) that could be what your looking.

How to Make Buttons in Silverlight 2.0

Yes.. it is very very annoying when you are a designer and you use silverlight 2.0 in blend.. why? NO CUSTOM BUTTONS! Well.. now I will teach you how through code. No.. its not as hard as it seems.. it is quite easy! Its just hard when you ask a coder because they talk like they are from mars. But I am an earthling so here it is in earthling designer terms:

Make a new silverlight 2.0 application and name it 'SilverlightApplication4'
So lets say you want to make 2 buttons. draw 2 different squares in blend.
Name them! Name one 'rectangle' and the other 'rectangle1'. It is very important you name them.
ok now you need to make the states for the rectangle button. make these different timelines:
'rectangleMouseOver' 'rectangleMouseDown' 'rectangleMouseUp'
in each timeline make the rectangle a different color. lets say.. in one timeline red.. the other green.. and the last purple.
Now you need to make the states for the other btn 'rectangle1'. So do the same thing except name the timelines 'rectangle1MouseOver' 'rectangle1MouseDown' 'rectangle1MouseUp' change the colors like before.
ok now its time for the scary dreaded code! First you need to right click 'rectangle' and view xaml.
Now put this code in right after x:Name="rectangle"

MouseEnter="rectangle_MouseEnter" MouseLeave="rectangle_MouseLeave" MouseLeftButtonDown="rectangle_MouseLeftButtonDown" MouseLeftButtonUp="rectangle_MouseLeftButtonUp"

Now do the same for the other btn "rectangle1" except when you copy the code in you need to make it say "rectangle1" = whatever... not "rectangle" = whatever.

Ok now on to the last coding.

Click on the project tab in the upper right of blend. find where it says page.xaml and click on the little arrow next to it to drop down the list. You should see Page.xaml.cs. Double click it.

Ok now you need to make that code look like this:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication4
{
public partial class Page : UserControl
{
public Page()
{
// Required to initialize variables
InitializeComponent();
}
private void rectangle_MouseEnter(object sender, MouseEventArgs e)
{
this.MouseOver.Begin();
}
private void rectangle_MouseLeave(object sender, MouseEventArgs e)
{
this.MouseLeave.Begin();
}
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.MouseDown.Begin();
}
private void rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
this.MouseUp.Begin();
}


}
}


That will make your first rectangle work!

Now to make the second one work please findthe last part that says:
private void rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){this.MouseUp.Begin();}

But before the last 2 "}}"

Add in this code:




private void rectangle1_MouseEnter(object sender, MouseEventArgs e){this.MouseOver.Begin();}private void rectangle1_MouseLeave(object sender, MouseEventArgs e){this.MouseLeave.Begin();}private void rectangle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){this.MouseDown.Begin();}private void rectangle1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){this.MouseUp.Begin();}



There you go.. if anyone has any problems please let me know!

Creating a Frame to host other websites

This is a tutorial to show you how to make a frame in blend. Create a rectangle the size you would like your new frame. Right click the rectangle and view XAML. type the following ABOVE the rectangle tag/code :

*Frame Source="http://www.google.com"/*

JUST REMEMBER: dont use '*' like I did.. use '<' and '>' in their place. I had to use * so the code would show up for you in blogger.

expandable control with window

Do you have a user control in your project that just wont expand with the window(when tested)?

Then here is what you do:

First click on the control in your project and make sure it is set to stretch and also auto. Now if that does not work go open up your user control and check if the user control and layout root are set to stretch and Auto.

that should do it! ;)