I'm getting settled in with using Expression Blend, and there is one thing I am trying to do that I can not figure out for the life of me.
I want to have a tree where each text item has an icon before the text (trying to create something like a folder tree view). I created a sample data source and each item has two properties. An image and a line of text. the problem is that rather than the icon being before the text, the icon is really big and has a new line before the text. How do I correct this? Thanks for your help!
You can see what I'm getting here: http://imgur.com/daDaz.png
Edit:
The solution I came to involved editing the MainWindow.xaml. I set the property names in the data tab to 'TreeIcon' and 'TreeLabel', then I added an orientation attribute to the stackpanel and changed the icon height/width to something more agreeable:
<StackPanel Orientation="Horizontal">
<Image Source="{Binding TreeIcon}" HorizontalAlignment="Left" Height="24" Width="32"/>
<TextBlock Text="{Binding TreeLabel}"/>
</StackPanel>
Without the 'Orientation' attribute, it defaulted to vertical, so setting it to 'Horizontal' got the icon and text positioned properly. Setting the image height to 24 makes the icon roughly a good size for the text it's next to. The width is set to 32 because when it was at 24, the icon and the text were directly next to each other, with no padding at all. Upping the width to 32 padded some padding to the left.
Is this silverlight or WPF? Have you looked at your style template to find the content controls and see if they're set with a maxheight or maxwidth property and perhaps a stackpanel with Horizontal orientation?
Related
I have write a simple code in XAML for zoom an Image
<Grid Grid.Row="1" Background="AliceBlue" Margin="10,10,10,10" Name="Griglia_Immagine">
<ScrollViewer Name="MyScrollViewer" MinZoomFactor="1" ZoomMode="Enabled">
<Image Name="Imm_Visualizzata" Source="Assets/Test.jpg" >
</ScrollViewer>
</Grid>
When i zoom the image it became more big.
On my right i can see the vertical scrool bar but i don't see the Horizontal one.
So... where the image is big i can move Up-Down ...but if i move left-right the image where i leave my finger the image return on left border.
I'had tried to set HorizontalScrollBarVisibility and VerticalScrollBarVisibility ...
If i set both to Hidden the start image is very big (original format) If i set both to Disabled the zoom not work.
If i set One on Hidden and one on Disabled the zomm work but i can move the image only vertival or horizontal... where i had set the Hidden value..
Anyone had solved it ?
Thanks
I am using VS2013, Windows 8.1 and developing a windows store app.
Im creating a simple contacts - listview, that displays the contact details along with contact image within an ellipse. When I click on the listview item, I want to display the contact details on right side of the page. Now the issue I am facing is, I am not able to fit the contact image to the right size on the ellipse on the right side pane.
I am able to achieve it in my list view since its an smaller ellipse.
Important: I do not want the image to look stretched/Zoomed in /Zoomed out. It should exactly look like how it appears within the list view. (For list view , I have used Ellipse.Fill along with Imagebrush, but relatively smaller sized ellipse)
What I tried so far:
Ellipse.Fill property which paints the image to size, but the image looks stretched.
I tried setting "Stretch" property within the image tag within ellipse, but did not work.
I tried Image.clip, but I do not have "EllipseGeometry" option, instead only RectangleGeometry.
Lastly I created an image that has a transparent center and I place this frame over the contact image like a mask. This works well on some resolutions. But when some other resolution, the contact images which are binded from backend, go beyond the frame, although I set "MaxHeight" or "Height" properties.
I want to do it the right way, since I feel adding an image mask might not be a great way to achieve this. Please help!
I tried this for listview, n works fine, But the same code for right pane looks stretched (I have tried removing stretch attirbute, or tried other options like Stretch ="None" /"Uniform" etc )
I have attached screenshot.
Since code isn't clearly mentioned, you can do it with both Ellipse and Border. Here's the code snippet
<!--With Ellipse-->
<Ellipse Height="200"
Width="200">
<Ellipse.Fill>
<ImageBrush Stretch="Uniform"
ImageSource="Assets/profile.png" />
</Ellipse.Fill>
</Ellipse>
<!--With Border-->
<Border Height="200"
Width="200"
CornerRadius="150">
<Border.Background>
<ImageBrush Stretch="Uniform"
ImageSource="Assets/profile.png" />
</Border.Background>
</Border>
Here's the result
The properties "AlignmentX AlignmentY" within ImageBrush solved my issue.
If your image has portrait orientation, then you can use Stretch, AlignmentX, AlignmentY properties of ImageBrush like this to achieve best preview result
<Border CornerRadius="20" BorderThickness="1" BorderBrush="DarkGoldenrod">
<Ellipse Width="40" Height="40">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding PractitionerPhoto}" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Top" />
</Ellipse.Fill>
</Ellipse>
</Border>
Background
I'm a noob on Windows Phone 8. I've learnt WPF and Silverlight in the past, but it was long ago.
On Windows phone 8, I have a clickable Image control which I wish to have its content (the picture itself) to have rounded corners.
The question
How do I set rounded corners to a control?
Also, I might consider having a Button control instead, so that I could customize what happens when it is being clicked (or touched). Upon clicking, I would like that the area that has the rounded corners would be colored in some color, showing that it was indeed being clicked/touched. How do I do that?
EDIT:
Thanks to #Depechie, I've found this solution:
<Grid>
<Border Height="200" Width="250" CornerRadius="0,0,50,50">
<Border.Background>
<ImageBrush ImageSource="Images/Desert.jpg" />
</Border.Background>
</Border>
</Grid>
However, I have two problems with that:
I still can't find how to make it seen as clicked when you touch it, so that the rounded corners would have a yellow background.
I can't get the imageSource and the converter (and its parameter) via code when handling the clicking event. Previously, I've used:
Image thumbnailImage = (Image)sender;
var bindingExpression = thumbnailImage.GetBindingExpression(Image.SourceProperty);
string selectedItem = (string)bindingExpression.DataItem;
string selectedThumbnailIndex = (string) bindingExpression.ParentBinding. ConverterParameter;
Maybe I could create the items programmatically instead of Xaml? If so, how (items are in a grid, btw)?
What can I do now?
Try this by using Rect
<Image VerticalAlignment="Center"
HorizontalAlignment="Center"
Stretch="None"
Source="Jellyfish.jpg">
<Image.Clip>
<RectangleGeometry RadiusX="5"
RadiusY="5"
Rect="0,0,150,113"/>
</Image.Clip>
</Image>
Here is the another link
https://msdn.microsoft.com/en-us/library/ms750631(v=vs.110).aspx
There is a similar question listed here...
Maybe those can help you too?
And if you want to have the ilusion that the image is a clickable control, take a look at TiltEffect that is available in the Phone toolkit
Instead of attempting to alter the shape of a control (Which after looking in VS and Blend I dont think is possible) Why not simply create your image with rounded edges and then set the button border and background to no color?
For the rounded corners, you can set the RadiusX and RadiusY values to nonzero numbers to achieve that effect in a rectangle. So I imagine you could embed a button inside the rectangle if you want to keep the button control.
<Image Width="25" Height="25" VerticalAlignment="Center"
HorizontalAlignment="Center"
Stretch="Fill"
>
<Image.Clip>
<RectangleGeometry RadiusX="12.5"
RadiusY="12.5"
Rect="0,0,25,25"/>
</Image.Clip>
</Image>
The corner radius should be half of width or height.
I need to create a slider with two colors, so that when you slide one direction or the other it appears as though one color has a higher percent over the other, or vice versa. However, when I apply the code below, wp7 automatically dims the background color, so it's not the proper color. The slider is in a list box which iterates over objects, so the colors are constantly changing. Any way to make the color of the foreground match the color of the background? (so that #ffffff would appear white on both sides of the slider, and not white on one and a gray on the other?)
Code is below.
<Slider
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="1"
Background="{Binding AwayTeam.Color}"
Foreground="{Binding HomeTeam.Color}"
FlowDirection=""
Value="4.7"
/>
Ok, so I'm adding some clarification. Look at the picture at this link. Slider Example
The bottom background (right hand side) is what I need the slider to look like, and that blue is what the color is supposed to look like. But, when I set that blue as the background color, wp7 makes it darker. The top slider is what wp7 currently does to the background color, and the bottom is what I need the background color to look like.
You just need to make a minor modification to the sliders template:
Open the project in Expression Blend.
Select the slider in the "Objects and Timeline" window.
Right click on it and select: Edit Template > Edit a copy
In the xaml for the template, find this line
<Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}"
Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2"/>
remove Opacity="0.2"
Accept this answer. :)
I have an image as a drawing brush in xaml. The only property set is Stretch, which is set to Uniform.
The image is then set to the background of a usercontrol which has no properties set with regards to size.
The usercontrol is then used within a a grid, and set to span 2 rows like so:
<common:Logo
Height="130"
Width="500"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
/>
The problem is that there is loads of white space on top and below the image, which is also quite small.
The image started as a vector graphic and has no space above or below.
When I view the usercontrol with sizes set, it fits perfectly with no white space.
I am hoping this is not a problem with the grid reporting an incorrect size.
Any ideas would be appreciated!
Visual Studio was not refreshing any of the changes, running the code and reviewing what was produced fixed the whole problem!