I am developing windows phone application. here I am taking some images from Facebook.All images coming in horizontal scrolling one after other
Problem: how to add some blank space between two images
This is my code so far:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Visible" >
<Image Source="{Binding Path=picture}" Width="250" Height="250" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Here is the solution set Margin Of Image control inside datatemplate of listbox.
<ListBox Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding FacebookImages}" Stretch = "Fill" Margin="20,0,0,0"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Related
I am using Adobe Flex 4.6 and I have this image:
<mx:Image source="assets/logo.png" horizontalAlign="center" verticalAlign="middle"></mx:Image>
The image appears, but it does not center horizontal or vertical, how Do I center this image?
I have also tried the following:
<mx:Canvas width="100%">
<mx:HBox horizontalCenter="0" verticalCenter="0">
<mx:Image source="assets/logo.png" horizontalAlign="center" verticalAlign="middle"></mx:Image>
</mx:HBox>
</mx:Canvas>
Still nothing, my image wont center
This worked for me
<s:Group width="100%" height="100%">
<s:layout>
<s:VerticalLayout
verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<s:BitmapImage source="#Embed(source='assets/logo.png')" />
</s:Group>
Use the horizontalCenter and VerticalCenter properties in the image tag as below
<mx:Image source="assets/logo.png" horizontalCenter="0" verticalCenter="0"></mx:Image>
It is working fine for me.
My app loads tiles(buttons) into each longlistselector. So no individual buttons are coded. I am trying to add a border and corner radius, but it is not working out well at all. The border is added with the curves in it but the actual tile is not curved. Is there a way to round the corners of the actual tile and add a border to it correctly?
<DataTemplate x:Key="SoundTileDataTemplate">
<StackPanel>
<Grid Background="{StaticResource PhoneAccentBrush}"
Margin="0,5,6,0" Height="56" Width="400"
toolkit:TiltEffect.IsTiltEnabled="True">
<Border BorderBrush="white" BorderThickness="3" CornerRadius="15,15,15,15" />
<TextBlock Text="{Binding Title}" FontSize="19" TextWrapping="Wrap" Width="140" FontFamily="Tahoma" />
<Image Source="/Assets/tiles/soundwave1.png" Width="30" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,6,6" Visibility="{Binding Status, Converter={StaticResource DownloadStatusToIconVisibilityConverter}}" />
<ProgressBar Height="12" VerticalAlignment="Bottom" Padding="0" Margin="0" Foreground="{StaticResource PhoneForegroundBrush}" Value="{Binding DownloadProgress}" Visibility="{Binding Status, Converter={StaticResource DownloadStatusToProgressBarVisibilityConverter}}"/>
</Grid>
</StackPanel>
</DataTemplate>
your grid is setting the background color but is not shaped like the border. Remove this.
<Grid Background="{StaticResource PhoneAccentBrush}"
Set the border background color.
<Border BorderBrush="white"
BorderThickness="3"
CornerRadius="15,15,15,15"
Background="{StaticResource PhoneAccentBrush}"></Border>
when i rotate my phone , wrappanle is not changed and it does not get new figure . what should i do for that ?
and this is my xaml code :
<ScrollViewer>
<toolkit:WrapPanel>
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Margin="10" Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
<Rectangle Height="100" Width="200" Fill="Red" />
<Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
</toolkit:WrapPanel>
You need to set the SupportedOrientations property of your PhoneApplicationPage to PortraitOrLandscape value.
You can read more about screen orientation here: http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207002(v=vs.105).aspx#BKMK_Orientations
The content(Here is VBox) is not align with Tab, put it in another way, the content is stretch out one pixel(The red border is wider than the Tab), as show in the following pic:
So how to solve the issue?
code snippet:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
>
<mx:TabNavigator id="tn"
width="300"
height="300"
tabWidth="{tn.width/tn.numChildren}"
borderStyle="solid"
borderColor="#ff0000"
backgroundColor="#ffffff"
paddingTop="0">
<mx:VBox id="vb1" width="100%" label="Tab 1" backgroundColor="#ffffff">
<mx:Label text="width:{vb1.width}, height:{vb1.height}" />
</mx:VBox>
<mx:VBox id="vb2" width="100%" label="Tab 2" backgroundColor="#00ffff">
<mx:Label text="width:{vb2.width}, height:{vb2.height}" />
</mx:VBox>
</mx:TabNavigator>
</mx:Application>
I've had this problem for quite a while now, and I just cant get my head around it..
First, a short explanation of my program:
It's going to be used to view complicated scenes in 3D, but to make it work on laptops it's instead showing pre-rendered 360 degree renders of the objects.
When you load an object, it first buffers 360 frames into memory, so that you can rotate around this object smoothly. When you release the mouse button, it loads in the high-res image of that frame.
Then, you should be able to zoom in and move around to inspect the model closer.
Problem here is when I have the scrollbars enabled it wont work properly.
Firstly, I had a problem where the vertical scrollbar moved out of the picture when I was scrolling the horizontal scrollbar.
Then after some more testing, they now stay where they should, but when I zoom in (will post code below) the horizontal scrollbar is not able to go far enough to the left to show the whole image.
What happens is, when I zoom in, the scrollbar remains at it's left position, but I zoom in on the center of the image (zooming, by scaling the container. The image fill the container).
My problem is probably just a result of me overlooking some basic understanding. And sorry if the code is a bit messy, I've only done a little bit of clean up. The code I post below is without any scrollbars visible.
You can see that I've tried using scrollbar components too, and it works somehow. But I'm not able to scale the scrollbar depending on the content, so if I zoom in or out, the handle you drag on the scrollbar will be the same...
Thanks a LOT in advance to anyone trying to help me figure this out!
Image of app running if needed:
Code:
<mx:Panel x="0" y="0" width="100%" height="100%" titleIcon="#Embed('assets/img/cog_01.png')" title="vCog Subsea - Draugen Project">
<mx:HDividedBox x="0" y="0" width="100%" height="100%" liveDragging="true">
<mx1:TabNavigator width="30%" height="100%" chromeColor="#4B4B4B" tabHeight="20">
<mx1:DividedBox width="100%" height="100%" label="Components" borderVisible="true">
<mx:VBox width="100%">
<mx:Tree id="treeView" x="0" y="0" width="100%" height="100%"
itemRenderer="components.CustomTreeItemRenderer"
paddingBottom="2" showRoot="true"
itemClick="treeItemClick(event)"
itemOpen="treeItemOpen(event)" />
<mx:Canvas width="100%" height="30" styleName="information">
<mx:CheckBox id="infoCheckBox" x="10" y="5" width="100%" label="Information"
click="checkbox1_clickHandler(event)" enabled="true"
selected="{infoview_visible}" styleName="infoCheckBox"/>
</mx:Canvas>
</mx:VBox>
</mx1:DividedBox>
</mx1:TabNavigator>
<mx:HBox width="100%" height="100%">
<mx1:TabNavigator id="myTabs" width="100%" height="100%" dropShadowVisible="false" tabHeight="20">
<mx1:DividedBox id="my3DView" width="100%" height="100%"
label="3D View Main" borderVisible="true" >
<!-- CONTAINER -->
<mx:Canvas id="container" width="100%" height="100%"
resize="resizeHandler(event)"
mouseWheel="videoBufferWheel(event)"
horizontalScrollPolicy="off"
verticalScrollPolicy="off" >
<!-- CONTENT -->
<mx:Canvas id="content"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Canvas id="videoCanvas" width="100%" height="100%"
mouseDown="videoBufferMDown(event)"
mouseMove="videoBufferMMove(event)"
mouseUp="videoBufferMUp(event)" >
<s:Image id="imageBuffer" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
<s:Image id="imageFull" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch"/>
<s:Image id="imageMask" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
</mx:Canvas> <!-- videoCanvas END -->
</mx:Canvas> <!-- CONTENT END -->
<!-- Scrollbars -->
<s:HScrollBar id="hScroll" bottom="0" left="0" right="16" maximum="100" minimum="-100"
pageSize="100" change="scroll(event)"
visible="false" />
<s:VScrollBar id="vScroll" right="0" top="0" bottom="16" maximum="100" minimum="-100" pageSize="100"
change="scroll(event)"
visible="false" />
<!-- Camera controlls -->
<mx:Panel id="panelCamera" visible="true" right="20"
bottom="20" width="130" height="50"
backgroundAlpha="0.6" backgroundColor="#383838"
borderAlpha="0.5" chromeColor="#2A2A2A"
contentBackgroundAlpha="1.0"
contentBackgroundColor="#737373" cornerRadius="0"
dropShadowVisible="false" focusColor="#999999"
layout="absolute" styleName="panelCamera"
symbolColor="#878787" title="Select camera">
<mx:Button id="btnTotal" x="10" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonTotalStyle" click="camTotalClick(event)"/>
<mx:Button id="btnClose" x="50" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonCloseStyle" click="camCloseClick(event)"/>
<mx:Button id="btnExploded" x="90" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonExplodedStyle" click="camExplodedClick(event)"/>
</mx:Panel>
<!-- Full/Color image loading bar -->
<mx:ProgressBar id="myProgressFull" y="10" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
label="Downloading Image" fontSize="7" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="-8"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressColor" y="27" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
label="Downloading Hilights" fontSize="7" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="-8"
labelPlacement="center"/>
<!-- Main loading bar -->
<mx:Panel id="myLoadingPanel" top="100" width="520" height="107"
backgroundAlpha="0.5"
backgroundColor="#3A3A3A"
borderVisible="true"
contentBackgroundColor="#7E7E7E"
dropShadowVisible="false"
fontWeight="normal" fontThickness="0" fontSize="10" color="#959595"
headerHeight="15"
horizontalAlign="center"
horizontalCenter="0"
layout="absolute"
title="Downloading and buffering content..."
visible="false"
verticalAlign="middle"
titleIcon="#Embed('assets/img/loading_01.png')"
>
<mx:ProgressBar id="myProgressBarTotal" y="10" width="500"
label="Total progress" chromeColor="#474747"
color="#FFFFFF" fontWeight="normal"
horizontalCenter="0" indeterminate="false" mode="manual"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressBar" y="41" width="500"
label="Downloading data" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="0"
labelPlacement="center" source="_SWFLoader"/>
<mx:ProgressBar id="myProgressBar2" y="61" width="500"
label="Buffering data" chromeColor="#75584A"
color="#EB7738" fontWeight="normal"
horizontalCenter="0" indeterminate="false" mode="manual"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressBarVisual" y="32" width="500" height="5" label=" "
horizontalCenter="0" indeterminate="true"
labelPlacement="center"/>
</mx:Panel>
</mx:Canvas> <!-- CONTAINER END -->
</mx1:DividedBox>
<mx1:DividedBox width="100%" height="100%" label="Main Map" borderVisible="true">
<mx:Canvas width="100%" height="100%" click="overviewClickHandler(event)" >
<s:Image id="overColor" width="100%" height="100%" source="assets/img/overview_color_001.png" scaleMode="letterbox" visible="false" />
<s:Image id="overFull" width="100%" height="100%" source="assets/img/overview_001.png" scaleMode="letterbox" smooth="true" />
</mx:Canvas>
</mx1:DividedBox>
</mx1:TabNavigator>
</mx:HBox>
</mx:HDividedBox>
</mx:Panel>
Functions:
public function videoBufferWheel(event:MouseEvent):void{
var delta:Number=(event.delta*myZoom)/300;
if(myZoom+delta<1){
delta=1-myZoom;
}else if(myZoom+delta>3){
delta=3-myZoom;
}
myZoom += delta;
resizeHandler(null);
event.stopImmediatePropagation();
}
public function resizeHandler(event:Event):void{
var _w:Number=container.width-scrollerSize;
var _h:Number=container.height-scrollerSize;
if(_w/_h<aspect){
content.height=_h*myZoom;
content.width=(_h*myZoom)*aspect;
}else{
content.height=(_w*myZoom)/aspect;
content.width=(_w*myZoom);
}
content.x = (-content.width/2)+container.width/2+(hOffset*(container.width-content.width)/200);
content.y = (-content.height/2)+container.height/2+(vOffset*(container.height-content.height)/200);
}
If I understand right, you want to move a scroll button when user zooms an image. But where do you add a code for this action? I mean you should add a code to move the scroll button.