I am developing a windows phone 8 application in which i created some images on a canvas dynamically, Now i want to add drag and drop behaviour on every dynamically created image.
private void btnStart_Click(object sender, RoutedEventArgs e)
{
Image img = new Image();
img.Stretch = Stretch.Uniform;
img.Name = imgDefaultName + ctr.ToString();
img.Height = 220;
img.Width = 160;
MyCanvas.Children.Add(img);
Canvas.SetLeft(img, left);
Canvas.SetTop(img, top);
img.Source = new BitmapImage(new Uri("/Assets/eclipse.png", UriKind.Relative));
// left = left + 100;
}
My xaml look like this
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,5,0,0">
<!--<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">-->
<Canvas Name="MyCanvas" Background="WhiteSmoke" Width="483">
</Canvas>
<!--</ScrollViewer>-->
</Grid>
You must handle the UIElement.ManipulationStarted, UIElement.ManipulationDelta, UIElement.ManipulationCompleted events for your images.
Check THIS example.
Related
I am developing a game in which i am making a Game Over Screen but the components are not rearranging properly.
What i am Getting on 1024 * 720 screen is:
and what it should look like:
and the code is:
#Override
public void show() {
stage = new Stage(new ScreenViewport());
camera = new OrthographicCamera(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
Gdx.input.setInputProcessor(stage);
font = new BitmapFont(Gdx.files.internal("newfont.fnt"));
verysmallfont = new BitmapFont(Gdx.files.internal("verysmallfont.fnt"));
smallfont = new BitmapFont(Gdx.files.internal("smallfont.fnt"));
atlas = new TextureAtlas("ui/buttons.pack");//add atlas
skin = new Skin(atlas);
table = new Table(skin);
actiontable = new Table(skin);
actionbar = new Table(skin);
actionbar2 = new Table(skin);
table.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
actiontable.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
actionbar.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
actionbar2.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
TextButton.TextButtonStyle buttonback = new TextButton.TextButtonStyle();
buttonback.up = skin.getDrawable("back");
buttonback.pressedOffsetX = 1;
buttonback.pressedOffsetY = -1;
buttonback.font = font;
buttonBack = new TextButton("",buttonback);
TextButton.TextButtonStyle lifebuttonstyle = new TextButton.TextButtonStyle();
lifebuttonstyle.up = skin.getDrawable("life");
lifebuttonstyle.pressedOffsetX = 1;
lifebuttonstyle.pressedOffsetY = -1;
lifebuttonstyle.font = font;
buttonlife = new TextButton("",lifebuttonstyle);
TextButton.TextButtonStyle textButtonStyle = new TextButton.TextButtonStyle();
textButtonStyle.up = skin.getDrawable("heart_game_continue");
textButtonStyle.pressedOffsetX = 1;
textButtonStyle.pressedOffsetY = -1;
textButtonStyle.font = font;
buttonPlay = new TextButton("",textButtonStyle);
TextButton.TextButtonStyle adsfreeStyle = new TextButton.TextButtonStyle();
adsfreeStyle.up = skin.getDrawable("Video");
adsfreeStyle.pressedOffsetX = 1;
adsfreeStyle.pressedOffsetY = -1;
adsfreeStyle.font = font;
buttonVideo = new TextButton("",adsfreeStyle);
TextButton.TextButtonStyle sharebuttonStyle = new TextButton.TextButtonStyle();
sharebuttonStyle.up = skin.getDrawable("Replay");
sharebuttonStyle.pressedOffsetX = 1;
sharebuttonStyle.pressedOffsetY = -1;
sharebuttonStyle.font = font;
buttonReplay = new TextButton("",sharebuttonStyle);
Label.LabelStyle headingstyle = new Label.LabelStyle(font,Color.WHITE);
label = new Label("Game Over",headingstyle);
label.setFontScale(1.7f);
Label.LabelStyle contstyle = new Label.LabelStyle(smallfont,Color.WHITE);
cont = new Label("Continue?",contstyle);
cont.setFontScale(2f);
Label.LabelStyle replaystyle = new Label.LabelStyle(verysmallfont,Color.WHITE);
replay = new Label("Replay",replaystyle);
shortVideo = new Label("(Short Video)",replaystyle);
replay.setFontScale(2f);
shortVideo.setFontScale(2f);
table.align(Align.top);
table.padTop(197f);
table.add(label);
table.getCell(label).spaceBottom(150f);
table.row();
table.add(cont);
table.getCell(cont).spaceBottom(80f);
table.row();
table.add(buttonPlay).size(200f,200f);
actiontable.add(buttonVideo).size(200f,200f);
actiontable.add(buttonReplay).size(200f,200f);
actiontable.align(Align.bottom);
actiontable.getCell(buttonVideo).spaceBottom(20f).padRight(100f);
actiontable.getCell(buttonReplay).spaceBottom(20f).padLeft(100f);
actiontable.row();
actiontable.add(shortVideo).padRight(100f);
actiontable.add(replay).padLeft(100f);
actiontable.padBottom(197f);
actiontable.setFillParent(true);
actionbar.align(Align.topLeft).setWidth(Gdx.graphics.getWidth());
actionbar.add(buttonBack).align(Align.left).size(90f,90f);
actionbar2.align(Align.topRight);
actionbar2.add(buttonlife).align(Align.right).size(90f,90f);
actionbar.getCell(buttonBack).pad(43f);
actionbar2.getCell(buttonlife).align(Align.right).pad(43f);
stage.addActor(actionbar2);
stage.addActor(actionbar);
stage.addActor(table);
stage.addActor(actiontable);
buttonPlay.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y) {
((Game) Gdx.app.getApplicationListener()).setScreen(new Main(level,a,start,sweep,collide,innerarcs,out,mid,arcsleft,left,pointerColor));
};
});
buttonReplay.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y) {
int total = out+mid+innerarcs;
((Game) Gdx.app.getApplicationListener()).setScreen(new Main(level,a,total,pointerColor));
}
});
buttonBack.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y) {
((Game) Gdx.app.getApplicationListener()).setScreen(new Menu(level));
}
});
}
SpriteBatch batch;
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0.184f,0.184f,0.184f,1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.act(delta);
stage.draw();
}
private OrthographicCamera camera;
#Override
public void resize(final int width, final int height) {
table.setTransform(true);
table.setSize(width,height);
actiontable.setTransform(true);
actiontable.setSize(width,height);
actionbar.setTransform(true);
actionbar.setSize(width,height);
}
I am new to libgdx please help i dont have any knowledge about how to use camera and viewports.
Thanks in advance..
€dit: sorry my bad - there's nothing like "stage.resize"
But I'll let the answer in, because it'll fix your problem, though not as fast as you wish, but in a more clear way.
(THE FOLLOWING TEXT IS NOT NECESSARRY FOR THE ANWSER AND ARE ONLY SUGGESTIONS)
(if you follow the following steps, you'll save yourself time & headaches in the future)
I'd suggest a viewport, because they'll kill many problems with scaling, and there are quite a few, from which you can choose, as you need.
LibGdx Viewports
A viewport takes care for different screen sizes with the help from different techniques (e.g. scaling, black bars)
Additionally a viewport is SUPER easy to implement.
You'll do the following(e.g. FitViewport(stretches content, if necessary)):
stage = new Stage();
OrthographicCamera cam = new OrthographicCamera();
cam.setToOrtho(false, 800, 600);
stage.setViewport(new FitViewport(800, 600, cam));
TADA. You implemented a viewport. Was not so hard.
(but make sure to call stage.getViewport().update(w, h) in the resize(w, h) method!! AND DON'T FORGET IT!!)
Second suggestion I'd do is:
Use a main table.
So you do following
Table myMothershipTable = new Table();
myMothershipTable.setFillParent(true);
myMothershipTable.add(add);
myMothershipTable.add(all);
myMothershipTable.add(content);
stage.addActor(myMothershipTable);
Now you've only one actor, which is the table, and you can be damned sure, that this table will fill the whole screen.
Your screen is 10999x3? yeah. the table will be 10999x3.
Good. If you've refactored your whole stuff into one table I'd suggest the next step:
stage.setDebugAll(true); //this will help you to see the actual buildup from your actors & elements
So heres the why:
The viewport takes care for your stage size
the single table makes sure, that your complete content will be within the screen ==> now you can add one item after another, and make sure with..
stage.setDebugAll(true).. that your content is placed properly.
If you follow this simple steps, you'll save yourself a lot of time and headache with designing the UI.
I'm trying to use Skins with TextButtons. However I'm having an issue where the TextureRegions of the Skin are NOT being scaled down to the tablesize.
This is leading to an issue like in this image:
As you can see that is the e from the word Hello. I managed to scale that down to a more reasonable size (still wrong). However the Button textures are still way too large.
Any ideas? Because I am pulling my hair out. I am using a custom viewport with a custom screenspace width and height. Here is the create method for the menu.
public void create(){
menuStage = new Stage();
camera = new OrthographicCamera();
viewPort = new StretchViewport(SCREEN_SPACE_WIDTH, SCREEN_SPACE_HEIGHT, camera);
viewPort.setWorldSize(SCREEN_SPACE_WIDTH, SCREEN_SPACE_HEIGHT);
menuStage.setViewport(viewPort);
devTexture = new Sprite (new Texture(Gdx.files.internal("data/16by9.png"), true));
Image newActor = new Image(devTexture.getTexture());
newActor.setSize(
viewPort.getWorldWidth(),
viewPort.getWorldHeight()
);
menuStage.addActor(newActor);
skin = new Skin(Gdx.files.internal("data/uiskin.json"));
menuTable = new Table();
skin.getFont("default-font").setScale(0.08f);
menuTable.debugAll();
menuTable.setFillParent(true);
TextButton a,b,c;
a = new TextButton("hello", skin);
b = new TextButton("hello", skin);
c = new TextButton("hello", skin);
a.getStyle().up.setMinWidth(2.0f);
b.getStyle().up.setMinHeight(2.0f);
b.getStyle().up.setMinWidth(2.0f);
c.getStyle().up.setMinHeight(2.0f);
c.getStyle().up.setMinWidth(2.0f);
menuTable.row();
menuTable.add(a).size(2.0f, 1.0f);
menuTable.add(b).size(2.0f, 1.0f);
menuTable.add(c).size(2.0f, 1.0f);
menuStage.addActor(menuTable);
camera.translate(
newActor.getWidth() / 2,
newActor.getHeight() / 2
);
}
Im currently trying to implement a CycleTile within a scheduled task agent. I need Large-Tile-Images like this:
(image on the left side, custom Background, text on the right side)
http://s7.directupload.net/file/d/3361/54hbvlby_png.htm
I think I must render everything to one Image and set it as "CycleImages" to the CycleTile...
My current code looks like this:
void SavetoIsoStore(BitmapImage image)
{
//(...)
WriteableBitmap wb = CreateLargeBookImage(image);
using (IsolatedStorageFileStream imageStream = new IsolatedStorageFileStream("/Shared/ShellContent/" + tempJPEG, System.IO.FileMode.Create, myIsolatedStorage))
{
wb.SaveJpeg(imageStream, wb.PixelWidth, wb.PixelHeight, 0, 100);
}
IsolatedStorageFileStream fileStream = myIsolatedStorage.CreateFile(tempJPEG);
fileStream.Close();
}
imageNameCounter++;
}
private WriteableBitmap CreateLargeBookImage(BitmapImage bitmap)
{
WriteableBitmap wb = new WriteableBitmap(691, 336);//Large TileSize
//Magic filling, changing and rendering here
return wb;
}
The CycleTile reads the IsolatedStore.
I dont know how to start this... By rendering an UI object or another way?! The web doesnt provide me with satisfactory results...
edit:
Running Code:
private WriteableBitmap CreateLargeBookImage(BitmapImage bitmap)
{
WriteableBitmap wb = new WriteableBitmap((int)widthL, (int)heightL);
//<Grid x:Name="LayoutRoot" Height="336" Width="691">
// <Grid Background="White">
// <Grid.ColumnDefinitions>
// <ColumnDefinition/>
// <ColumnDefinition/>
// </Grid.ColumnDefinitions>
// <Image Grid.Column="0"
// Source="Images\35.jpg"
// MaxHeight="200"/>
// <TextBlock Grid.Column="1"
// Text="Testassdaseasdf"
// Foreground="Black"
// FontSize="24"
// Margin="15,0,0,0"
// VerticalAlignment="Center"
// HorizontalAlignment="Left"/>
// </Grid>
//</Grid>
var backgroundColor = new SolidColorBrush(Colors.White);
Grid grid = new Grid()
{
Background = backgroundColor,
};
ColumnDefinition columnDef1 = new ColumnDefinition();
ColumnDefinition columnDef2 = new ColumnDefinition();
grid.ColumnDefinitions.Add(columnDef1);
grid.ColumnDefinitions.Add(columnDef2);
Image img = new Image()
{
MaxHeight = 200,
Source = bitmap,
HorizontalAlignment = HorizontalAlignment.Right,
VerticalAlignment = VerticalAlignment.Center
};
img.SetValue(Grid.ColumnProperty, 0);
var fontColor = new SolidColorBrush(Colors.Black);
TextBlock txt1 = new TextBlock()
{
Text = "TETSTETSTETET",
FontSize = 24,
Margin = new Thickness(15, 0, 0, 0),
Foreground = fontColor,
VerticalAlignment = VerticalAlignment.Center
};
txt1.SetValue(Grid.ColumnProperty, 1);
grid.Children.Add(img);
grid.Children.Add(txt1);
grid.UpdateLayout();
grid.Measure(new Size(widthL, heightL));
grid.Arrange(new Rect(0, 0, widthL, heightL));
wb.Render(grid, new TranslateTransform()
{
X = 0,
Y = 0
});
wb.Invalidate();
return wb;
}
You'll have make a render of UI controls.
Here is some sample code that creates a simple "Hello world" tile:
1. Instantiate the controls
var fontFamily = new FontFamily("Segoe WP SemiLight");
var fontColor = new SolidColorBrush(Colors.White);
var textTextBlock = new TextBlock()
{
Text = "Hello world!",
FontSize = 40,
Foreground = fontColor,
FontFamily = fontFamily
};
2. Render the controls as a WriteableBitmap
var bitmap = new WriteableBitmap(173, 173);
bitmap.Render(textTextBlock, new TranslateTransform()
{
X = 9,
Y = 9
});
bitmap.Invalidate();
If your layout is complex, my advice is to create the XAML first with a designer tool like Blend, and when it's done you do the same thing in C#.
EDIT: if you want to render a Grid control, you need to add the Children elements to the grid:
grid.Children.Add(textTextBlock);
and call the following methods to ensure that the Controls are positionned correctly:
grid.UpdateLayout();
grid.Measure(new Size(tileWidth, tileHeight));
grid.Arrange(new Rect(0, 0, tileWidth, tileHeight));
I have a map with 100 pushpins. Every time I tap a pushpin, a textbox with description is opened near that pushpin (only 1 textbox can be opened at a time, when you tap a pushpin, the previous opened textbox is closed first), but sometimes the textbox is not on top of other pushpins, other pushpins appear above the textbox, making it hard to read the description. I've tried using Canvas and Canvas.ZIndex, but nothing worked properly.
I had a similar issue, and I solved it my removing and adding the object again whenever it was tapped.
MapLayer theLayer = new MapLayer();
MapOverlay theOverlay = new MapOverlay()
{
GeoCoordinate = new GeoCoordinate(lat, lng)
};
var pp = new StackPanel { Background = new SolidColorBrush(Colors.Black), Orientation = System.Windows.Controls.Orientation.Vertical };
var img = new Image()
{
Source = new BitmapImage(new Uri(url, UriKind.Absolute)),
Width = 50,
Height = 50
};
pp.Children.Add(img);
img.Tap += (object emitter, System.Windows.Input.GestureEventArgs e) => {
theLayer.Remove(theOverlay);
theLayer.Add(theOverlay);
};
theOverlay.Content = pp;
theLayer.Add(theOverlay);
Hope this helps!
I want to add border around TextBlock programatically in Windows Store Application.
How can I do this?
Thanks.
Create new project and add this code in OnNavigatedTo event.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var tb = new TextBlock()
{
Text = "...TextBlock with border...",
FontSize = 20
};
//To get actual height and width of TextBlock
tb.Arrange(new Rect(0, 0, Window.Current.Bounds.Width, Window.Current.Bounds.Height));
tb.Measure(new Size(Window.Current.Bounds.Width, Window.Current.Bounds.Height));
var border = new Border()
{
BorderThickness = new Thickness(3),
BorderBrush = new SolidColorBrush(Windows.UI.Colors.Red),
Height = tb.ActualHeight + 10,
Width = tb.ActualWidth + 10
};
var rootGrid = (Grid)(((Page)this).Content);
rootGrid.Children.Add(border);
border.Child = tb;
}